vue 可编辑表格

template

<template>
  <div>
    <template>
      <el-button @click="addClick" style="float: right; margin: -40px 10% 0 0"
        >add</el-button
      >
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.date.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 80%; margin: auto"
        border
      >
        <el-table-column prop="date" label="日期" width="240">
          <template slot="header" slot-scope="scope">
            日期
            <el-input
              v-model="search"
              class="el_input"
              style="display: inline-block; width: 60%"
              clearable
              size="mini"
              placeholder="请输入日期搜索"
            />
            {{ scope.row }}
          </template>
          <template slot-scope="scope">
            <span v-if="!scope.row.isShow">{{ scope.row.date }}</span>
            <el-input
              :id="scope.row.id"
              :ref="scope.row.ref"
              v-if="scope.row.isShow"
              type="text"
              style="width: 60%"
              v-model="scope.row.date"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <span v-if="!scope.row.isShow">{{ scope.row.name }}</span>
            <el-input
              v-if="scope.row.isShow"
              type="text"
              style="width: 60%"
              v-model="scope.row.name"
            />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <template slot-scope="scope">
            <span v-if="!scope.row.isShow">{{ scope.row.address }}</span>
            <el-input
              v-if="scope.row.isShow"
              type="text"
              style="width: 60%"
              v-model="scope.row.address"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="saveClick(scope.row)"
              >保存</el-button
            >
            <el-button type="text" size="small" @click="deleteClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

js部分

<script>
export default {
  data() {
    return {
      search: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isShow: false,
          id: "id0",
          ref: "ref0",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          isShow: false,
          id: "id1",
          ref: "ref1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          isShow: false,
          id: "id2",
          ref: "ref2",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          isShow: false,
          id: "id3",
          ref: "ref3",
        },
      ],
    };
  },
  methods: {
    editClick(row) {
      this.tableData.forEach((item) => {
        this.$set(item, "isShow", false);
        if (row.date == item.date) {
          this.$set(item, "isShow", true);
        }
      });
      this.$nextTick(() => {
        document.querySelector(`#${row.id}`).focus();

        // this.$refs[`${row.ref}`].focus() 不生效
      });
    },
    saveClick(row) {
      this.tableData.forEach((item) => {
        if (row.date == item.date) {
          this.$set(item, "isShow", false);
        }
      });
    },
    addClick() {
      let item = {
        date: "",
        name: "",
        province: "",
        city: "",
        address: "",
        zip: "",
        isShow: true,
        id: "id" + (this.tableData.length + 1),
        ref: "ref" + (this.tableData.length + 1),
      };
      this.tableData.push(item);
      this.$nextTick(() => {
        console.log(`#${item.id}`);
        document.querySelector(`#${item.id}`).focus();
      });
    },
    deleteClick(row) {
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.forEach((item, index) => {
            if (row.date == item.date) {
              this.tableData.splice(index, 1);
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>