el-table实现可编辑表格

2021-09-20 23:03:04 阅读：227 来源： 互联网

标签：el console log edit 编辑表格 list table data row

实现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,console,log,edit,编辑表格,list,table,data,row
来源： https://blog.csdn.net/Suzerk/article/details/120396650

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

el-table实现可编辑表格