vue3结合element plus实现可编辑列表

结合Element Plus组件库，可以更方便地实现可编辑列表。以下是一个基于Element Plus的可编辑列表示例：

1. 在组件中引入需要的Element Plus组件。

<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="姓名" prop="name">
        <template #default="{ row }">
          <template v-if="!row.editable">{{ row.name }}</template>
          <el-input v-else v-model="row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age">
        <template #default="{ row }">
          <template v-if="!row.editable">{{ row.age }}</template>
          <el-input v-else v-model="row.age"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-if="!row.editable" @click="edit(row)">编辑</el-button>
          <el-button v-else @click="save(row)">保存</el-button>
          <el-button @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="add">新增</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElInput } from 'element-plus';

export default {
  components: {
    ElButton,
    ElTable,
    ElTableColumn,
    ElInput,
  },
  setup() {
    const list = ref([
      { name: '张三', age: 18, editable: false },
      { name: '李四', age: 20, editable: false },
      { name: '王五', age: 22, editable: false },
    ]);

    const edit = (row) => {
      row.editable = true;
    };

    const save = (row) => {
      row.editable = false;
    };

    const add = () => {
      list.value.push({ name: '', age: '', editable: true });
    };

    const del = (row) => {
      list.value.splice(list.value.indexOf(row), 1);
    };

    return {
      list,
      edit,
      save,
      add,
      del,
    };
  },
};
</script>

2. 在el-table-column组件中使用template标签，通过default插槽控制每个单元格的显示。

3. 在template标签中使用v-if和v-else指令控制是否显示输入框和文本内容。

4. 点击编辑按钮时，将对应项的editable属性设为true，显示输入框。

5. 点击保存按钮时，将对应项的editable属性设为false，更新文本内容。

6. 点击新增按钮时，向数组中添加一个空对象，editable属性设为true，显示新增行。

7. 点击删除按钮时，通过splice方法从数组中删除对应项。

这样就可以使用Element Plus更方便地实现可编辑列表了。