<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: '\r\n', // 允许您定义行分隔符。
rowHeaders: true // 允许您使用行标题导出数据。
})
}
}
}
</script>
<style>
@import '~handsontable/dist/handsontable.full.css';
</style>