如何给el-table添加行级验证(一)（el-table设置行高）

写在前面的问题汇总:1.表单的验证都有现成的例子,表格的验证时,不想给每行添加ref;2.还想要给表头添加必填的*号

思路:

针对上述问题1:把list单独放到form里就可以了(就相当于el-form里的el-table验证)

针对上述问题2:利用header-cell-class-name方法自定义class

实现:

问题1的解决方法:

<el-form ref="stockList" :model="list_obj" label-width="100px" size="mini">
	<el-table :data="list":header-cell-class-name="setThMustFill" >
  	****  
    <el-table-column align="center" label="资产类别" prop="type" show-tooltip-when-overflow
                             width="120px">
              <template slot-scope="scope">
                <div v-if="scope.row.edit" class="">
                  <el-form-item
                      :prop="`list.${scope.$index}.type`"
                      :rules="[{ required: true, message: '请选择资产类别', trigger: 'change' }]"
                      label="" label-width="0px">
                    <el-select v-model="scope.row.type" clearable>
                      <el-option
                          v-for="item in config.type"
                          :key="'list.type.'+item.id"
                          :class="item.taxon"
                          :label="item.title"
                          :value="parseInt(item.id)"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div v-else class="text-es ovf inline-block">
                  {{ scope.row.type }}
                </div>
              </template>
            </el-table-column>
  </el-table>
</el-form>

// js 部分
data () {
    return {
      pageTotal:0,
      list_obj: {},
      list:[]
    }
}
methods:{
// 获取列表
    getList () {
      apiStockGoodsList(this.params).then(r => {
        if (r.code === 200) {
          r.data.data.forEach((el) => {
            // 添加标记状态,默认为false
            el.edit = false;
          });
          this.list = r.data.data;
          this.list_obj = {
            list: r.data.data
          };
          this.pageTotal = r.data.total;
        }
      })
    },
}

今天就先写到这里吧,工作任务下来了,要开发新东西了.未完待续...