el-table-column 必填校验

对于 el-table-column 必填校验，可以通过设置 prop 属性为必填项，然后在 el-table 的 validate 方法中进行校验。具体实现可以参考以下代码：

<el-table :data="tableData" ref="table">
  <el-table-column prop="name" label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

methods: {
  validate() {
    this.$refs.table.validate(valid => {
      if (valid) {
        // 校验通过
      } else {
        // 校验不通过
      }
    })
  }
}

相关问题

el-table-column设置必填

在El-Table组件中，可以使用自定义样式来设置el-table-column为必填项。可以通过在el-table-column上绑定一个渲染函数来实现这个功能。具体的代码如下所示：

<el-table-column label="材料名称" width="250" :render-header="addRedStar"></el-table-column>

其中，addRedStar是一个渲染函数，在这个函数中可以通过h函数创建一个span元素来显示必选标识，并将其与column.label一起渲染：

addRedStar(h, { column }) {
  return [
    h('span', { style: 'color: #F56C6C' }, '*'),
    h('span', ' ' + column.label)
  ];
}

通过这个渲染函数，可以在el-table-column的表头中显示一个带有红色星号的必选标识。这样设置后，在el-table中，该列的表头会显示一个红色星号，表示该列为必填项。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [el-table给表头添加红色必填*](https://blog.csdn.net/siyuechangmeng/article/details/125318348)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* *3* [Element el-table表格添加必填校验处理](https://blog.csdn.net/qq_45213494/article/details/124788360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]

el-form放el-table里面 表单校验必填提示变成batchList.${scope.$index}.bq_price

在Vue.js中，`el-form`通常用于表单验证，而`el-table`用于数据展示。当你将一个`el-form`放在`el-table`的行(`row`)里，如果某列设置了必填规则，表单提交前会检查该字段是否为空。当你使用模板字符串`${scope.$index}`动态绑定每个表格行的数据时，比如价格(bq_price)字段需要验证，可以在验证规则中引用这个动态路径。

例如，在`el-form-item`的`rules`属性中，你可以这样设置必填提示：

<template>
  <el-form :model="batchList">
    <el-table-column prop="bq_price" label="价格" v-for="(item, index) in batchList" :key="index">
      <template slot-scope="scope">
        <el-form-item :label="$t('必填') + ':'" :prop="'batchList.' + index + '.bq_price'">
          <el-input v-model="scope.row.bq_price"></el-input>
          <el-form-item-error @show="errorShow(index)" :show="{ valid: false }"></el-form-item-error>
        </el-form-item>
      </template>
    </el-table-column>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      batchList: [
        { bq_price: '' },
        // 更多数据...
      ]
    };
  },
  methods: {
    errorShow(index) {
      this.$refs.form.validateField('batchList.' + index + '.bq_price', (valid) => {
        if (!valid) {
          this.$message.error('batchList.' + index + '.bq_price 是必填项');
        }
      });
    }
  }
};
</script>

在这里，当某个`bq_price`字段为空时，就会显示相应的必填提示，提示信息就是`batchList.${scope.$index}.bq_price`。