zoukankan      html  css  js  c++  java
  • 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>
           
  • 相关阅读:
    @slf4j 使用方法
    spark入门简单介绍
    spring boot 的简单实用和spring cloud 概念
    nginx与Tomcat
    python27+百度文字识别api
    python27+opencv2.4.10+pytesseract0.2.0图片识别
    学习vue的核心功能
    使用vscode +vue的初始环境搭建
    excel的vlookup,第一次用
    pyautogui键盘鼠标控制,python27
  • 原文地址:https://www.cnblogs.com/wxqworld/p/11313906.html
Copyright © 2011-2022 走看看