ELMENT UI 一种可以编辑表格行的方法

最新推荐文章于 2024-10-16 16:24:32 发布

unlike353035108

最新推荐文章于 2024-10-16 16:24:32 发布

阅读量141

点赞数

文章标签： ui

本文链接：https://blog.csdn.net/unlike353035108/article/details/135095598

版权

当点击 "Edit" 按钮时，对应行的内容会变成可编辑状态，允许用户进行编辑。点击 "Save" 按钮可以保存修改。通过 editRow 变量来判断哪一行正在编辑。

<template>
  <div>
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="id" label="ID">
        <template slot-scope="scope">
          <template v-if="scope.row !== editRow">
            {{ scope.row.id }}
          </template>
          <template v-else>
            <el-input v-model="tempId" autocomplete="off"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name">
        <template slot-scope="scope">
          <template v-if="scope.row !== editRow">
            {{ scope.row.name }}
          </template>
          <template v-else>
            <el-input v-model="tempName" autocomplete="off"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="Action">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">Edit</el-button>
          <el-button @click="save(scope.row)">Save</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: '1', name: 'Item 1' },
        { id: '2', name: 'Item 2' },
        // Add more items as needed...
      ],
      editRow: null,
      tempId: '',
      tempName: '',
    };
  },
  methods: {
    edit(row) {
      this.editRow = row;
      this.tempId = row.id;
      this.tempName = row.name;
    },
    save(row) {
      row.id = this.tempId;
      row.name = this.tempName;
      this.editRow = null;
    },
  },
};
</script>