实现Element-ui表格点击可以编辑

实现Element-ui表格点击可以编辑

直接复值代码就可以运行了：有不懂，可评论！

<template>
  <div>
    <!-- <input type="file" id="people-export" ref="inputer" @change="fileUpload" /> -->

    <p style="font-size:26px; text-align: center; padding: 30px;">实现Element-ui表格点击可以编辑</p>
    <p style="font-size:20px;">方式1：</p>
    <el-table
      :data="tableData"
      style="width: 100%"
      @cell-click="cellClick"
    >
      <el-table-column label="Date" prop="date"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>


  <p style="font-size:20px; margin-top:50px;">方式2：更佳</p>
        <el-table
      :data="tableData2"
      style="width: 100%;"
    >
      <el-table-column label="Date" prop="date">
        <template slot-scope="scope">
          <span @click="oneCellClick(scope)">{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="Name" prop="name">
        <template slot-scope="scope">
          <span @click="oneCellClick(scope)">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      tableData2: [
        {
          id: '1',
          date: "2016-05-02",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: '2',
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      search: "",
    };
  },
  methods: {
    cellClick(row, column, cell, event) {
      // 原文连接 http://www.voidcn.com/article/p-vshxvfex-brn.html
      console.error("object:", row, column, cell, event);
      // 先清空cell的值
      cell.innerHTML = "";

      var ipt = document.createElement("input");

      ipt.value = row[column.property];
      // cell.append(ipt)
      console.error(column.property);
      ipt.type = "text";
      // ipt.value = "这是测试加载的小例子";

      ipt.onclick = (e) => {
        console.error("输入框被点击了", e);
        e.stopPropagation();
        e.preventDefault();
        return false;
      };

      // 在绑定光标离开事件
      ipt.onblur = (e) => {
        console.error("失去光标valu:", e, column.property, e.target.value);
        // row[column.property] = e.target.value;
        this.$set(row, column.property, e.target.value);
        cell.removeChild(ipt);
        let one = document.createElement("div");
        one.className = ["cell"];
        one.innerHTML = e.target.value;
        cell.appendChild(one);
        // this.$forceUpdate();
        console.error("row", this.tableData);
      };

      cell.appendChild(ipt);
      ipt.focus()
    },
    oneCellClick(scope){
      console.error('单元格被点击：',event,event.target.parentNode,scope);
        // this.tableData2[0].date='asdfasdf'
      var cell = event.target;
      var cellFa = event.target.parentNode;
      console.error('cell',cell);
      var row = scope.row;
      var column = scope.column;

      // cell.innerHTML = "";
      cell.style.display = 'none'

      var ipt = document.createElement("input");

      ipt.value = row[column.property];
      // cell.append(ipt)
      console.error(column.property);
      ipt.type = "text";
      // ipt.value = "这是测试加载的小例子";

      ipt.onclick = (e) => {
        console.error("输入框被点击了", e);
        e.stopPropagation();
        e.preventDefault();
        return false;
      };

      // 在绑定光标离开事件
      ipt.onblur = (e) => {
        console.error("失去光标valu:", e, column.property, e.target.value);
        row[column.property] = e.target.value;
        cellFa.removeChild(ipt);
        cell.style.display = 'block';
        console.error("row", this.tableData2);
      };

      cellFa.appendChild(ipt);
      ipt.focus()
    },
    fileUpload(event) {
      // 上传文件
      let file = event.target.files;
      console.log(event, file);

      let formData = new FormData();
      formData.append("name", "settingPic");
      formData.append("file", file[0]);
      console.log(formData);
      // 文件上传
      this.$axios({
        method: "POST",
        url: "/api/fileUpload",
        data: formData,
      })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            console.log(data);
          } else {
            this.$message.error(data.message || "操作失败");
          }
          this.uploadLoading = false;
        })
        .catch((e) => {
          this.uploadLoading = false;
          console.error("error:", e);
        });
    },
    // 原文链接：https://blog.csdn.net/hjhfreshman/article/details/90676072
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>