在el-table里面如何实现编辑当前行？

  • Z时代
  • 2024-02-15
  • 分类：IT

<template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },

回答：

在行数据中设置一个属性，用来区分当前行或者当前列是否在进行修改，使用v-show实现

  1. 在行内添加button，并直接操作当前数据对象，变更其值用来控制当前行或当前列是否修改，注意看几个button的click事件
  2. 如果在表格外部使用按钮操作，则定义一个method，传递行数据在table原始数据中的index，在method中操作对应index的数据。
<template>
  <div>
    <el-table :data="list">
      <el-table-column align="center" label="编号" width="80">
        <template slot-scope="{ row }">
          <span v-show="!row.editid">{{ row.id }}</span>
          <el-input v-show="row.editid" v-model="row.id"></el-input>
        </template>
      </el-table-column>
      <el-table-column width="180px" label="名称">
        <template slot-scope="{ row }">
          <span v-show="!row.editname">{{ row.name }}</span>
          <el-input v-show="row.editname" v-model="row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button
            v-show="!row.editid"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editid = !row.editid"
          >
            编辑id
          </el-button>
          <el-button
            v-show="!row.editname"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editname = !row.editname"
          >
            编辑名称
          </el-button>
          <el-button
            v-show="row.editid || row.editname"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="(row.editid = false) || (row.editname = false)"
          >
            Ok
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id: "1", name: "法外狂徒", editid: false, editname: false },
        { id: "2", name: "张三", editid: false, editname: false },
      ],
    };
  },
};
</script>
<style lang="scss" scoped></style>>

以上是 在el-table里面如何实现编辑当前行？ 的全部内容， 来源链接： utcz.com/p/934394.html

回到顶部