el-table 表格设置必填项

要在 el-table 中集成 el-form 来设置必填项，并进行表单验证，可以使用 Element UI 提供的表单验证功能。下面是一个详细的示例，展示了如何在 el-table 中使用 el-form 来设置必填项，并进行验证。

示例代码

1. 定义数据模型

首先定义表格的数据模型，并标记哪些字段是必填的。

复制代码

data() {
  return {
    tableData: [
      { id: 1, name: '项目一', value: '', required: true },
      { id: 2, name: '项目二', value: '', required: false },
      { id: 3, name: '项目三', value: '', required: true }
    ],
    form: {},
    rules: {
      value: [
        { required: true, message: '请输入内容', trigger: 'blur' }
      ]
    }
  };
},

2. 自定义表格单元格

在表格列中使用自定义槽来渲染输入框，并将输入框绑定到 el-form-item 中，以便进行验证。

复制代码

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-form-item :prop="'value.' + scope.$index" :rules="rules.value">
            <el-input
              v-model="scope.row.value"
              placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form>
</template>

3. 添加验证逻辑

在 Vue 实例的方法中添加验证逻辑，检查哪些字段是必填的，并在提交时显示错误。

复制代码

methods: {
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('提交成功！');
      } else {
        console.log('验证失败');
      }
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
}

完整示例

下面是一个完整的示例代码，展示了如何在 el-table 中设置必填项，并进行验证：

复制代码

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-form-item :prop="'value.' + scope.$index" :rules="rules.value">
            <el-input
              v-model="scope.row.value"
              placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '项目一', value: '', required: true },
        { id: 2, name: '项目二', value: '', required: false },
        { id: 3, name: '项目三', value: '', required: true }
      ],
      form: {},
      rules: {
        value: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功！');
        } else {
          console.log('验证失败');
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
/* 可以在此处添加自定义样式 */
</style>

解释

定义数据模型：定义表格的数据模型，并标记哪些字段是必填的。
自定义表格单元格 ：在表格列中使用自定义槽来渲染输入框，并将输入框绑定到 el-form-item 中，以便进行验证。
添加验证逻辑：在 Vue 实例的方法中添加验证逻辑，检查哪些字段是必填的，并在提交时显示错误。

通过上述方法，你可以实现在 el-table 中设置必填项，并进行相应的验证。当必填项未填写时，表单验证会失败，并显示相应的错误提示。