精华内容
下载资源
问答
  • Vue  JavaScript  Features The most popular features of Handsontable:  ✓ Multiple column sorting  ✓ Non-contiguous selection  ✓ Filtering data  ✓ Export to file  ✓...
  • 官网地址:https://handsontable.com/ 1.实现效果 ...import { HotTable } from '@handsontable/vue' import Handsontable from 'handsontable' 3.页面引用 <template> <hot-table...

    官网地址:https://handsontable.com/

    1.实现效果

     

    2.安装

    import { HotTable } from '@handsontable/vue'
    import Handsontable from 'handsontable'
     
    3.页面引用
    <template>
               <hot-table
                      ref="tableServer"
                      :data="hotSettings.dataList"                          // excal中的数据源
                      :context-menu="hotSettings.contextMenu"               // 右击鼠标可进行的操作
                      :col-headers="hotSettings.colHeaders"                 // 表格头部标题
                      :start-rows="hotSettings.startRows"                   // 默认固定行数
                      :start-cols="hotSettings.startCols"                   // 默认固定列数
                      :row-headers="hotSettings.rowHeaders"                 // 默认显示表格行头部
                      :row-heights="hotSettings.rowHeights"                 // 默认设置行高度
                      :manual-row-resize="hotSettings.manualRowResize"      // 
                      :manual-column-resize="hotSettings.manualColumnResize"
                      :manual-row-move="hotSettings.manualRowMove"
                      :columns="hotSettings.columns"
                      :before-remove-row="hotSettings.beforeRemoveRow"          // 删除行之前触发的事件
                      :after-create-row="hotSettings.afterCreateRow"            // 添加行后触发的事件                   //一定要记住所有的事件、数值一定要绑定在标签上才可使用,只在js的data中绑定是不可以的
                      :after-change="hotSettings.afterChange"                   // 新增行,动态改变值触发的事件
                      :id="`hotTableAll${$route.params.id}`"
                      class="table_hot"
                      license-key="non-commercial-and-evaluation"
                    />
                  </el-form-item>
                  <el-button class="primary-button uploadButton"
                             size="small"
                             type="primary"
                             icon="el-icon-upload"
                             @click="uploadFile">导出</el-button>
    </template>
    <script>
    import addressProvince from '@/components/addressProvince'
    import { HotTable } from '@handsontable/vue'
    import Handsontable from 'handsontable'
    import { Message } from 'element-ui'
    import priceList from '@/utils/priceList.js'

    // 如果excal中有值为空,可拦截
    const validatorList = (rule, value, callback) => {
      for (let i = 0; i < value.length; i++) {
        if (!value[i].region || !value[i].destination) {
          callback(new Error('请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行'))
          return
        }
      }
      callback()
    }
    const riseWeightVal = function (value, callback) {
      if (/^\d+(?=\.{0,1}\d+$|$)/.test(value) || value === '') {
        callback(true)
      } else {
        Message.error({
          message: '请输入数字'
        })
        callback(false)
      }
    }
    
    export default {
      components: {
        addressProvince,
        HotTable
      },
      data() {
        return {
          addressList: [{
            area: []
          }],
          hotSettings: {
            dataList: [],  //
            colHeaders: ['区域', '目的地', '首重 kg', '首重价格', '续重 kg', '续重价格'],
            startRows: 8,
            startCols: 6,
            rowHeaders: true,
            rowHeights: 40,
            manualRowResize: true,
            manualColumnResize: true,
            manualRowMove: true,
            customBorders: true,
            columns: [
          //data: dataList数组中对应的 键,readOnly: 只读, type: 属于什么类型 例:text, numeric, validator: 数据验证 { data: 'region', readOnly: false, type: 'text' }, { data: 'destination', readOnly: false, type: 'text' }, { data: 'firstWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false }, { data: 'firstWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false }, { data: 'riseWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false }, { data: 'riseWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false } ], beforeRemoveRow: this.beforeRemoveRowMe, afterCreateRow: this.afterCreateRowMe, afterChange: this.afterChangeMe, contextMenu: { items: { 'row_above': { name: '在此行上方插入行' }, 'row_below': { name: '在此行下方插入行' }, 'separator': Handsontable.plugins.ContextMenu.SEPARATOR, 'copy': { name: '复制' }, 'undo': { name: '撤消' }, 'separator1': Handsontable.plugins.ContextMenu.SEPARATOR, 'remove_row': { name: '删除行' }, 'clear_column': { name: '删除列' }, 'clear_custom': { name: '删除所有单元格', callback: function () { this.clear() } } } } }, expressCompanyList: [], dateRange: [], typeBol: false, searchParam: { supplierServiceRegionPriceVos: [] }, searchParamRules: { supplierServiceRegionPriceVos: [ { type: 'array', required: true, message: '请填写价格表', trigger: 'blur' }, { validator: validatorList, required: true, message: '请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行', trigger: 'blur' } ] }, showContent: false, loadShow: false, saveLimit: false } }, mounted() {
       this.hotSettings.dataList = this._.cloneDeep(priceList)
      },
      methods: {
        // 删除行之前调用
        beforeRemoveRowMe: function (changes, source) { // 数据改变时触发此方法
          this.hotSettings.dataList.splice(changes, source)
        },
        // 添加行
        afterCreateRowMe: function (changes) {
          this.hotSettings.dataList.splice(changes, 0, {
            region: '',
            destination: '',
            firstWeight: '',
            firstWeightPrice: '',
            riseWeight: '',
            riseWeightPrice: ''
          })
        },
        // 新增行时,动态改变值
        afterChangeMe: function (changes) {
          if (changes) {
            changes.forEach(([row, prop, oldValue, newValue]) => {
              console.log(oldValue)
              this.hotSettings.dataList[row][prop] = newValue
            })
          }
        },
        // 查看-excel不可编辑
        excalEdit() {
          this.hotSettings.columns.forEach(par => {
            par.readOnly = true
          })
        },
        definedShow() {
          this.showContent = true
        },
        saveSubmit() {
          // 防止点击多次触发
          if (this.saveLimit) return
        conso.log()
          const that = this
          that.searchParam.supplierServiceRegionPriceVos = that.hotSettings.dataList
          const temp = that._.cloneDeep(this.searchParam)
          that.$refs.searchForm.validate((valid) => {
            if (valid) {
          console.log(this.hotSettings.dataList)
              that.saveLimit = true
            }
          })
        },
        // 导出文件
        uploadFile() {
          // 可查看网址https://handsontable.com/docs/7.1.0/ExportFile.html
          const container = this.$refs.tableServer.hotInstance
          const exportPlugin = container.getPlugin('exportFile')
          exportPlugin.downloadFile('csv', {
            bom: 'UTF-8', // 允许您使用BOM签名导出数据。
            columnDelimiter: ',', // 允许您定义列分隔符。
            columnHeaders: false, // 允许使用列标题导出数据。
            exportHiddenColumns: true, // 允许您从隐藏列导出数据。
            exportHiddenRows: true, // 允许您从隐藏行导出数据
            fileExtension: 'csv', // 允许您定义文件扩展名。
            filename: '供应商服务价格表[YYYY]-[MM]-[DD]', // 允许您定义文件名。
            mimeType: 'text/csv', // 允许您定义MIME类型。
            rowDelimiter: '\r\n', // 允许您定义行分隔符。
            rowHeaders: true // 允许您使用行标题导出数据。
          })
        }
      }
    }
    </script>
    

      

      

     

    转载于:https://www.cnblogs.com/gqx-html/p/11268383.html

    展开全文
  • @VUE封装handsontable(仿写Element样式)-重点查看使用方法 #VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet) 前言:项目里有这么一个需求,作为前端人员,老板提出来的各种要求我们都要想办法...

    @VUE封装handsontable(仿写Element样式)-重点查看使用方法

    #Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet)

    前言:项目里有这么一个需求,作为前端人员,老板提出来的各种要求我们都要想办法费劲脑汁去完成,某天老板提出来了个问题问我:你能否把excel的内容复制到表格的编辑页面,当时想回答不能,没做过,但是出于微小自尊心的我,想尝试尝试,毕竟我们做的是金融投资基金类管理系统,大量的数据要录入,这样很麻烦的。ok,给我点时间尝试下呗,我这么回答。于是就有了以下经验,分享给大家。

    封装插件名称:handsontable
    封装文件夹:tableExcel
    配置参考网站:https://handsontable.com/docs/api/options/#fixedcolumnsleft
    更新内容: (暂时够用,不需要更新,如有问题请联系博主)

    一:参考图例。

    二:配置项。

    下面展示一些 主要配置项

    //这里展示的是主要配置项目(重要)';
    
    // 主要配置项
    // 粘贴的值
    hotSettings: {
      readOnly: false,//只读模式(false可写,true只读)
      licenseKey: 'non-commercial-and-evaluation',
      data: [], // 表格数据
      columns: [],
      colHeaders: [], // 表头数据
      renderAllRows: true,
      viewportColumnRenderingOffset: 0, // 渲染列数
      viewportRowRenderingOffset: 0, // 渲染行数
      maxRows: 0, // 最大行
      maxCols: 0, // 最大列
      // copyable:false,//是否允许复制
      rowHeaders: false, // 行表头,可以使布尔值(行序号),可以使字符串(左侧行表头相同显示内容,可以解析html),也可以是数组(左侧行表头单独显示内容)。
      autoWrapRow: true, // 自动换行
      manualColumnFreeze: false, // 手动固定列  ?
      manualColumnMove: false, // 手动移动列
      manualRowMove: false, // 手动移动行
      manualColumnResize: false, // 手工更改列距
      manualRowResize: false, // 手动更改行距
      comments: false, // 添加注释  ?
      cell: [ // ???
        // {row: 1, col: 1, className: 'htCenter htMiddle',},
      ],
      customBorders: [], // 添加边框
      columnSorting: false, // 排序
      stretchH: 'all', // 根据宽度横向扩展,last:只扩展最后一列,none:默认不扩展 all全部扩展
      fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical"
      fixedColumnsLeft: 0, // 固定左边列数
      fixedRowsTop: 0, // 固定上边列数
      mergeCells: [ // 合并
        // { row: 0, col: 1, rowspan: 1, colspan: 2 } // 指定合并
        //  {row: 3, col: 4, rowspan: 2, colspan: 2}
      ],
      afterChange: '', //点击值改变后的事件监听
      afterPaste: '',//复制粘贴值改变后的事件监听
      beforeChangeRender: ''
    }
    

    三:使用方法。

    切记安装插件

    npm install handsontable-pro/vue
    npm install handsontable-pro
    

    点我获取源码 提取码: yang

    ①:下载完成后拖进自定义目录文件。

    拖入公共组件目录.
    ②:页面进行引用。

    在这里插入图片描述
    在这里插入图片描述

    ③:页面自定义变量(变量可自定义)

    // about
    colHeaders: ['指标(单位:万)', '合计'], // 表头列表
    tableInfoList: [], // 表格内容
    columns: [], // 列对应数据
    fixedColumnsLeft: 0, // 固定左侧列数
    fixedRowsTop: 0, // 固定头部列数
    

    ④:定义只读模式(传的参数,为数组)

    rowReadOnlyList ---行只读 [0,1,2,3]
    colReadOnlyList ---列只读 [0,1,2,3]
    

    ⑤:传值渲染(可以根据封装组件自己定义)

    // 调用封装组件的方法
    this.$refs.tableExcels.init(this.colHeaders, this.tableInfoList, this.columns, this.fixedColumnsLeft, this.fixedRowsTop, false, [5], [1])
    

    ⑥:更新数据

    // 更新数据
    this.$refs.tableExcels.renderValue(//这里是自定义的列表数组this.cashList)
    

    ⑦:重新渲染(看情况调用)

    // 重新渲染(看情况调用)
    this.$refs.tableExcels.reRenders()
    

    ⑧:只读切换(true:表格全部不可编辑||false:解除全部自定义编辑)

    // true/false
    this.$refs.tableExcels.readOnlyMode(false)
    

    ⑨:父组件接收改变的值

    // true/false
    tableExcel(dataObj) {
      if (dataObj.type === 'doubleClick') {
    	//点击改变数组后返回的数据
      } else if (dataObj.type === 'paste') {
        //复制粘贴改变数组后返回的数据
      }
    },
    

    四:结尾语。

    给个关注呗,谢谢各位支持,有任何问题请联系本人。

    展开全文
  • handsontablevue中使用

    2020-06-19 16:31:30
    1.npm install handsontable-pro @handsontable-pro/vue 2.npm install handsontable @handsontable/vue 这样安装完handsontable依赖的各模块(moment、numbro、pikaday 、zeroclipboard)也一起安装完了,不必再...

    一、安装

    1.npm install handsontable-pro @handsontable-pro/vue

    2.npm install handsontable @handsontable/vue

    这样安装完handsontable依赖的各模块(moment、numbro、pikaday 、zeroclipboard)也一起安装完了,不必再单独安装

    页面如果使用相关的模块方法,可以直接import引入,如:

    页面直接上代码:

    <template>
      <div id="hot-preview">
        <HotTable :root="root" ref="testHot" :settings="hotSettings"></HotTable>
      </div>
    </template>
    
    <script>
      import { HotTable } from '@handsontable-pro/vue'
      import "handsontable/dist/handsontable.full.css"
      import Handsontable from 'handsontable-pro'
    
      export default {
        components: {
          HotTable
        },
        data: function() {
          return {
            root: 'test-hot',
            hotSettings:{
              data:[
                [false,'20080101', 10, 11, 12, 13,true],
                [false,'20090101', 20, 11, 14, 13,true],
              ],
              rowHeaders: true,
              colHeaders: true,
              colHeaders: ['选择','题目', 'A选项', 'B选项', 'C选项', 'D选项','答案'],          
              rowHeaders: [1,2],
              contextMenu: true,
              contextMenu:{
                items:{
                    // "row_above": {
                    //   name:'上方插入一行'
                    // },
                    // "row_below": {
                    //   name:'下方插入一行'
                    // },
                    "col_left": {
                      name:'左方插入列'
                    },
                    "col_right": {
                      name:'右方插入列'
                    },
                    "hsep1": "---------", //提供分隔线
                    "remove_row": {
                      name: '删除行',
                    },
                    "remove_col": {
                      name: '删除列',
                    },
                    "hsep2": "---------",
                }
              },
            }
            
            
          };
        },
        methods:{
                //TODO
        }
      }
    </script>

     

    展开全文
  • handsontablevue中使用时经验积累官方汉化handsontable日期组件汉化 官方汉化 官方的汉化文档只针对右键菜单栏的汉化 使用方法: 1、添加引用import ‘handsontable/languages/zh-CN’; 2、在setting中添加...

    handsontable在vue中使用时经验积累

    官方汉化

    官方的汉化文档只针对右键菜单栏的汉化
    

    使用方法:
    1、添加引用import ‘handsontable/languages/zh-CN’;
    2、在setting中添加language: ‘zh-CN’

    效果展示:
    在这里插入图片描述

    handsontable日期组件汉化

    vue中的handsontable日期控件没有使用handsontable.full.js下的组件渲染,所以修改handsontable.full.js下的内容没有效果,它使用的是pikaday组件,如下图:
    在这里插入图片描述
    将i18n国际化中的内容由英文改成中文,日期控件也变成对应中文,如下图:
    在这里插入图片描述

    展开全文
  • npm install handsontable @handsontable/vue 您也可以直接从加载它。 < script src =" https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js " > </ script > < script src ...
  • 如果表头数据太多,页面就特别宽,滚动条会带着整个页面滑动,就像这样。 其实这不算是这个插件的问题,但是我为此也纠结了很久。所以记录一下,这种超出的部分要 overflow: auto,只需要给这个盒子本身,再套一...
  • 这是VueHandsontable数据网格的官方包装。 它提供了数据绑定,数据验证,过滤,排序等功能。 安装U这是VueHandsontable数据网格的官方包装。 它提供了数据绑定,数据验证,过滤,排序等功能。 安装使用npm与...
  • vue handsontable excel表格

    2019-09-19 22:24:37
    第一步: 1.安装模块包 npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue 第二步: 在用到表格的页面引入 import { HotTable } ...
  • vue+handsontable页面表格插件

    千次阅读 2019-05-21 13:34:25
    1.安装:npm install handsontable @handsontable/vue 2.开始使用: import Handsontable from 'handsontable' import {HotTable} from '@handsontable/vue'; <template> <div> <HotTable ...
  • vuehandsontable 使用

    千次阅读 2019-06-10 18:35:00
    handsontable是目前在前端界最接近excel的插件,可以执行编辑,复制粘贴,插入删除行列,排序等复杂操作 ...npm install handsontable @handsontable/vue 这样安装完handsontable依赖的各模块(moment、n...
  • vue + handsontable 安装

    2021-08-19 11:12:21
    cnpm install handsontable @handsontable/vue 安装后在package.json包中会出现依赖包如下图所示: 因为我是在全局使用,所以在main.js中进行了配置(其实已经为后面使用埋下了坑): ...
  • handsontable官网地址:...npm install handsontable @handsontable/vue 2.引入css, 方式1 在app.vue中引入 <style src="../node_modules/hands...
  • vue-handsontable

    2018-11-20 15:52:51
    下载下来需要先npm i,安装插件。里面的包括获取数据,需要上传的数据我用console.log打印的,你们可以打开控制台查看数据。我用的是CE版本,不是pro付费的。有问题可以到我的博客下面提问~
  • 这里写目录标题初始化 Handsontable安装 Handsontable新建 Vue 模板 Table.vue导入Handsontable,填充 20x20 的表格数据路由测试 初始化 Handsontable 安装 Handsontable npm install handsontable @handsontable/...
  • 第一个坑: 在全局配置后,在vue页面使用时,仍然出错,找不到...import { HotTable, HotColumn } from '@handsontable/vue'; export default{ components: { HotTable, HotColumn }, } </script&g...
  • vue中使用handsontable

    千次阅读 2019-05-08 19:30:00
    npm install handsontable @handsontable/vue 2.定义结构 <hot-table :settings="hotSettings"></hot-table> 3.引入handsontable及其样式 import { HotTable } from '@handsontab...
  • 此类问题更多针对于下拉菜单到后台拉取数据的情景,解决办法如下 。 this.$refs.ht.hotInstance.updateSettings({ columns: this.columns })
  • Handsontable - 案例(Vue

    千次阅读 2019-09-13 00:24:15
    <template xmlns:v-clipboard="http://www.w3.org/1999/xhtml"> <div class="batch-import"> <div class="header"> <div class="flex-left">...el-button size="min...
  • handsontable实现调用Vue函数handsontabe自定义右键菜单调用Vue函数在Vue中生成handsontable ** handsontabe自定义右键菜单调用Vue函数 ** 在前端HTML编辑器中,添加一个div: <div id="PurchaseList...
  • vue.js表格组件 裁判官 (vue-handsontable-official) A Vue.js wrapper for the the Handsontable spreadsheet component. Handsontable电子表格组件的Vue.js包装器。 View demo 查看演示 Download Source 下载源...
  • 今天遇到个问题 发现handsontable隐藏后进行渲染,再打开的时候handsontable显示出现问题 如图: 图中表头没了,前台也没有报错。 这个时候需要从新渲染 $("#preparation_collapse").click(function () { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 678
精华内容 271
关键字:

handsontablevue

vue 订阅