当前位置:   article > 正文

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

vxe-column循环形式

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

  1. <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}">
  2. <vxe-table-column type="seq" width="60"></vxe-table-column>
  3. <vxe-table-colgroup :title="item.departName" align="center":field="item.departNameId" v-for="(item,index) in departList" :key="index">
  4. <vxe-table-column :field="'yearCount_'+index" title="年度+临时" width="100">
  5. <template v-slot="{ row }">
  6. <span v-if="row['haveDep_'+index]==1"> {{row['yearCount_'+index]}} <span v-if="row['tempCount_' + index]">+ </span>{{row['tempCount_'+index]}}</span>
  7. <span v-else>-</span>
  8. </template>
  9. </vxe-table-column>
  10. <vxe-table-column :field="'hasDistribut_'+index" title="已分配" width="100"></vxe-table-column>
  11. <vxe-table-column :field="'noEnough_'+index" title="未满足" width="100"></vxe-table-column>
  12. <vxe-table-column :field="'distributCount_'+index" width="100" title="本次分配" :edit-render="{name: '$input', props: {type: 'integer',min:0}}">
  13. <!-- <template v-slot:edit="{ row }">
  14. <vxe-input v-if="row['haveDep_'+index]==1" type="number" min=0 v-model="row['distributCount_'+index]" ></vxe-input>
  15. <span v-else>-</span>
  16. </template> -->
  17. </vxe-table-column>
  18. </vxe-table-colgroup>
  19. </vxe-table>

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

  1. data() {
  2. return {
  3. validRules: {},
  4. }
  5. }
  1. this.departList.forEach((ele,depIndex)=>{
  2. this.validRules['distributCount_' + depIndex] = [{
  3. validator: ({
  4. cellValue,
  5. rule,
  6. rules,
  7. row,
  8. rowIndex,
  9. column,
  10. columnIndex
  11. }) => {
  12. let total = 0
  13. for (let key in row) {
  14. if (key.indexOf('distributCount') != -1) {
  15. let num = (row[key] == null || row[key] == '-') ? 0 : row[key]
  16. total = total + Number(num)
  17. }
  18. }
  19. console.log(cellValue, row.storageCount - total)
  20. if (row.storageCount - total < 0) {
  21. return new Error('分配总和大于库存量')
  22. }
  23. }
  24. }]
  25. })

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

  1. async handleSubmit(val) {
  2. const errMap = await this.$refs.xTable.validate().catch(errMap => errMap)
  3. if (errMap) {
  4. this.$XModal.message({
  5. status: 'error',
  6. message: '校验不通过!'
  7. })
  8. return false
  9. }
  10. }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/716085?site
推荐阅读
相关标签
  

闽ICP备14008679号