Vue+element实现el-table行内编辑并校验

在Vue中结合Element UI实现el-table行内编辑并且包含验证的功能，可以通过以下步骤实现：

1. 使用el-table组件展示数据。
2. 使用el-input组件进行行内编辑。
3. 使用Vue的v-model进行数据双向绑定。
4. 使用Element UI的el-form和el-form-item组件进行验证。

以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-form :model="scope.row" :rules="rules" ref="editForm" inline>
          <el-form-item prop="name">
            <el-input
              v-model="scope.row.name"
              v-if="scope.row.edit"
              @blur="handleSubmit(scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.edit"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          v-if="scope.row.edit"
          type="success"
          size="small"
          @click="handleSubmit(scope.row)"
          >确认</el-button
        >
        <el-button
          v-if="scope.row.edit"
          size="small"
          @click="handleCancel(scope.row)"
          >取消</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          edit: false,
        },
        // ... 更多数据
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      row.edit = true;
      this.$set(this.tableData, index, row);
    },
    handleSubmit(row) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          row.edit = false;
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    handleCancel(row) {
      row.edit = false;
    },
  },
};
</script>

在这个例子中，我们定义了一个包含数据和验证规则的tableData数组。在el-table-column中，我们使用template插槽来定义每个单元格的内容。