<template> <div> <hot-table ref="searchForm" :data="hotSettings.dataList" :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" :after-change="afterChangeMe" class="table_hot" license-key="non-commercial-and-evaluation" /> <button @click="saveSubmit">xxx</button> </div> </template> <script> import { HotTable } from '@handsontable-pro/vue' import Handsontable from 'handsontable' 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 { alert('请输入数字') callback(false) } } export default { name: 'app', components: { HotTable }, data() { return { // addressList: [{ // area: [] // }], arr:[], demo:['a','b','c','d'], hotSettings: { dataList: [], // colHeaders: [ '数据名称','单位', '小数位', '最小值', '最大值', '最小原始值','最大原始值','寄存器类型','寄存器地址','数据格式','数据位','字节顺序','UnitidID'], 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: 'name', //data上传对应字段 }, { data: 'unit', //id type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, { data: 'decimalPlace', //id type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, { data: 'min', //data上传对应字段 type: 'numeric', //数值 }, { data: 'max', //data上传对应字段 type: 'numeric', //数值 }, { data: 'oddMin', //data上传对应字段 type: 'numeric', //数值 }, { data: 'oddMax', //data上传对应字段 type: 'numeric', //数值 }, { data: 'type', //id type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false , //是否严格匹配 }, { data: 'address', //data上传对应字段 type: 'numeric', //数值 }, { data: 'format', //id type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, { data: 'dataBits', type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, { data: 'byteOrder', type: 'dropdown', //下拉选择 source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'], strict: false //是否严格匹配 }, { data: 'unitId', //data上传对应字段 type: 'numeric', //数值 }, ], 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() { for(var i=0;i<10;i++){ let x = {riseWeight:11} this.hotSettings.dataList.push(x) } }, 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(row, prop, oldValue, newValue) this.hotSettings.dataList[row][prop] = newValue }) } }, //查看-excel不可编辑 excalEdit() { this.hotSettings.columns.forEach(par => { par.readOnly = true }) }, definedShow() { this.showContent = true }, saveSubmit() { this.hotRef = this.$refs.searchForm.hotInstance //这个是百度到的 用于验证红色的验证错误 this.arr = [] this.hotRef.validateCells((valid) => { if (valid) { this.hotSettings.dataList.forEach((item,index)=>{ //想获取[{name:'vue'},{name:'vue'}] 这种形式必须用this.hotSettings.dataList 而且 columns 中每个对象中的 data :一定要设置成你后台需要的样子! if(item.name || item.unit || item.decimalPlace || item.min || item.max || item.oddMin || item.oddMax || item.type || item.address || item.format || item.dataBits || item.byteOrder || item.unitId){ if(item.name && item.unit && item.decimalPlace && item.min && item.max && item.oddMin && item.oddMax && item.type && item.address && item.format && item.dataBits && item.byteOrder && item.unitId){ this.arr.push(item) }else{ alert(`请将第${index+1}行,填写完整!`) } } }) window.console.log(this.arr,"让我看看数据对不对是不是我想要的!") }else{ alert('请修改错误格式!') } }) }, // 导出文件 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: ' ', // 允许您定义行分隔符。 rowHeaders: true // 允许您使用行标题导出数据。 }) } } } </script> <style> @import '~handsontable/dist/handsontable.full.css'; </style>