element 如何在提交的时候，对表格内选中行的输入框进行校验？

  • Z时代
  • 2024-03-05
  • 分类：IT

element 如何在提交的时候，对表格内选中行的输入框进行校验？
现在是在el-form中嵌套el-table，
只想校验选中行，不校验未选中行，
请问有无解决方法，谢谢。

补充：

      <el-form :model="formData" ref="form">
        <el-table
            ref="multipleTable"
            :data="formData.productList"
            tooltip-effect="dark"
            height="400"
            style="width: 100%"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            @row-click="handleRowClick"
            @selection-change="handleSelectionChange"
            empty-text="暂无商品">
          <el-table-column
              type="selection">
          </el-table-column>
          <el-table-column
              label="商品名称"
              property="goodsName">
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <el-form-item :prop="'productList.'+scope.$index+'.price'" :rules="rules.price">
                <el-input v-model.number="scope.row.price" size="mini">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

data

      formData:{
        productList:[],
      },
      rules: {
        price: [
          { required: true, message: '请设置活动规则', trigger: 'blur' },
          { type: "number", message: "必须为数字值" , trigger: 'blur' },
        ],
      },

回答：

因为你是行内绑定的校验规则，那么可以改写 rules.price 的必填校验规则为自定义校验规则。
然后通过去匹配当前已经选择的条目 Key 列表，如果不包含在内则直接调用 callback()。

例如下边这样的一段伪代码：

<template>
<el-form :model="formData" ref="form">
  <el-table ref="multipleTable" @selection-change="handleSelectionChange" ...>
    ...
    <el-table-column label="价格">
      <el-form-item
        slot-scope="{row,$index}"
        :prop="$index+'goodsName_'+row.goodsName"
        :rules="rules.price"
      >
        <el-input size="mini" append="元"  v-model.number="row.price" />
      </el-form-item>
    </el-table-column>
    ...
  </el-table>
</template>
<script>
export default {
   ...
   data(){
     return {
       ...
       rules: {
         price: [
           { validator: validatePrice, trigger: 'blur' }
         ],
       },
     }
   },
   computed:{
     selectionKeys(){
       return this.multipleSelection.map(item=>item.goodsName)
     }
   },
   ...
   methods:{
     ...
     validatePrice(rule, value, callback){
       const goodsName = rule.field.split("_").pop()
       if(this.selectionKeys.includes(goodsName)&&!value) return callback('请设置活动规则')
       callback()
     },
   }
}
</script>

以上是 element 如何在提交的时候，对表格内选中行的输入框进行校验？ 的全部内容， 来源链接： utcz.com/p/933105.html

回到顶部