vxe-table循环的vxe-table-column 如何进行edit-rules校验

1.循环vxe-table-column 
例如下方代码,根据departList的长度,先循环出你需要的表格表头

<vxe-table :loading="tableLoading" :edit-rules="validRules" keep-source resizable border="" ref="xTable" height="480" :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" :scroll-x="{gt: 10}" :scroll-y="{gt: 10}">
                    <vxe-table-column type="seq" width="60"></vxe-table-column>
                    <vxe-table-colgroup :title="item.departName" align="center":field="item.departNameId" v-for="(item,index) in departList" :key="index">
                        <vxe-table-column :field="'yearCount_'+index" title="年度+临时" width="100">
                            <template v-slot="{ row }">
                                <span v-if="row['haveDep_'+index]==1"> {{row['yearCount_'+index]}} <span v-if="row['tempCount_' + index]">+ </span>{{row['tempCount_'+index]}}</span>
                                <span v-else>-</span>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column :field="'hasDistribut_'+index" title="已分配" width="100"></vxe-table-column>
                        <vxe-table-column :field="'noEnough_'+index" title="未满足" width="100"></vxe-table-column>

                        <vxe-table-column :field="'distributCount_'+index" width="100" title="本次分配" :edit-render="{name: '$input', props: {type: 'integer',min:0}}">
                            <!-- <template v-slot:edit="{ row }">
                                <vxe-input v-if="row['haveDep_'+index]==1" type="number"   min=0  v-model="row['distributCount_'+index]" ></vxe-input>
                                <span v-else>-</span>
                            </template> -->
                        </vxe-table-column>
                    </vxe-table-colgroup>

                </vxe-table>

2.现在需要对hasDistribut这个字段进行校验,但是这个字段在经过循环后,已经衍生成hasDistribut_0 . hasDistribut_1  .hasDistribut_2 .hasDistribut_3等等,在data里面肯定无法直接定义了,需要在生成departList的地方将hasDistribut的校验也循环生成。

 data() {
        return {
            validRules: {},
        }
}
    this.departList.forEach((ele,depIndex)=>{
                                    this.validRules['distributCount_' + depIndex] = [{
                                        validator: ({
                                            cellValue,
                                            rule,
                                            rules,
                                            row,
                                            rowIndex,
                                            column,
                                            columnIndex
                                        }) => {
                                            let total = 0
                                            for (let key in row) {
                                                if (key.indexOf('distributCount') != -1) {
                                                    let num = (row[key] == null || row[key] == '-') ? 0 : row[key]
                                                    total = total + Number(num)
                                                }
                                            }
                                            console.log(cellValue, row.storageCount - total)
                                            if (row.storageCount - total < 0) {
                                                return new Error('分配总和大于库存量')
                                            }

                                        }
                                    }]
                            })

3.这样edit的时候校验就生效了,最终保存的时候进行快速校验。不通过不能保存

    async handleSubmit(val) {
            const errMap = await this.$refs.xTable.validate().catch(errMap => errMap)
            if (errMap) {
                this.$XModal.message({
                    status: 'error',
                    message: '校验不通过!'
                })
                return false
            }
     }

edit-rules的快速校验有一个特点,就是发生了edit的表格才会校验,如果这个数据是初始化带来的的,一样可以通过校验。

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`edit-rules` 是 `vxe-table` 表格组件中用于校验和限制单元格编辑的属性。 它是一个数组,每一项都是一个对象,表示一个单元格的校验规则和限制条件。以下是一些常见的校验规则: - required:表示该单元格必须填写内容; - number:表示该单元格必须填写数字; - integer:表示该单元格必须填写整数; - email:表示该单元格必须填写正确的邮箱格式; - url:表示该单元格必须填写正确的URL格式; - min:表示该单元格填写的数字必须大于等于指定的最小值; - max:表示该单元格填写的数字必须小于等于指定的最大值; - length:表示该单元格填写的字符串长度必须在指定的范围内。 下面是一个例子,展示了如何使用 `edit-rules`: ```html <template> <vxe-table :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell' }"> <vxe-column field="name" title="姓名" :edit-render="{ name: 'input', autofocus: true }" :edit-rules="{ required: true }"></vxe-column> <vxe-column field="age" title="年龄" :edit-render="{ name: 'input', type: 'number' }" :edit-rules="{ required: true, number: true, min: 0, max: 120 }"></vxe-column> <vxe-column field="email" title="邮箱" :edit-render="{ name: 'input' }" :edit-rules="{ required: true, email: true }"></vxe-column> <vxe-column field="phone" title="电话" :edit-render="{ name: 'input' }" :edit-rules="{ required: true, length: [11, 11] }"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, email: 'zhangsan@example.com', phone: '13812345678' }, { name: '李四', age: 25, email: 'lisi@example.com', phone: '13912345678' }, { name: '王五', age: 32, email: 'wangwu@example.com', phone: '15812345678' } ] } } } </script> ``` 在上面的例子中,我们为每一列都设置了 `edit-rules` 属性,表示该列的单元格编辑规则。例如,姓名列的单元格必须填写内容,年龄列的单元格必须填写数字,并且数字必须在 0 到 120 之间。 当用户编辑单元格时,`vxe-table` 会根据 `edit-rules` 的设置来校验单元格的内容,如果不符合校验规则,则无法保存修改。同时,`vxe-table` 也会根据 `edit-rules` 的设置来限制单元格的编辑操作,例如必填字段必须填写内容,否则无法保存修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值