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

作者站长头像
站长
· 阅读数 14

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' },
        ],
      },
回复
1个回答
avatar
test
2024-07-17

因为你是行内绑定的校验规则，那么可以改写 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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容