vue handsontable 插件 如何验证该行内的某项内容是否填写 ！

<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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wxqworld/p/11313906.html