handsontable mysql_Handsontable vue如何实现在线编辑excal

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 // 允许您使用行标题导出数据。

})

}

}

}