el-table实现可编辑表格

本文主要是介绍el-table实现可编辑表格，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

实现el-table的可编辑表格如图所示：


以下展示部分代码：

       <el-table-column label="价格" min-width="20" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.edit"
              v-model="scope.row.price"
              placeholder="价格"
            ></el-input>
            <span v-else>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" min-width="20" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.edit"
              v-model="scope.row.store"
              placeholder="库存"
            ></el-input>
            <span v-else>{{ scope.row.store }}</span>
          </template>
        </el-table-column>
          <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              @click="confirmData(scope.row)"
              v-if="scope.row.edit"
              type="success"
              size="medium"
            >
              <i class="el-icon-check" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <el-button
                type="primary"
                size="medium"
                @click="editData(scope.row)"
              >
                <i class="el-icon-edit" aria-hidden="true"></i>
              </el-button>
              <el-button
                type="danger"
                size="medium"
                @click="handleDelete(scope)"
              >
                <i class="el-icon-delete" aria-hidden="true"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>

methods：

    editData(row) {
      row.edit = true;
      // console.log(row.edit);
      // console.log(row.price);
    },
    confirmData(row) {
      row.edit = false;
      // console.log(row.edit);
      // console.log(row.price);
      this.$notify({
        title: "Success",
        message: "编辑成功",
        type: "success",
        duration: 2000,
      });
    handleDelete(row, index) {
      this.$notify({
        title: "Success",
        message: "Delete Successfully",
        type: "success",
        duration: 2000,
      });
      this.list.splice(index, 1);
    },

注意：这样写了以后发现点击按钮改变edit值时，不能立刻反应在view中，而且每行会影响，于是动态给所有数组记录 添加edit属性。
在getList方法中实现给数组加edit属性。

  let data = JSON.parse(JSON.stringify(this.list ? this.list : []));
        data.forEach((element) => {
          element["edit"] = false;
        });
        this.list = data;

这篇关于el-table实现可编辑表格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！