elementui中的table中写入input操作等，并监听变化以及更改为输入的数据

<template>
  <div class="app-container road-sprinkler-workload">
    <div class="table-bar block car">
      <el-table v-loading="loading" :data="data" height="calc(82vh - 173px)">
        <el-table-column label="设备名称" header-align="left" prop="deviceName" />
        <el-table-column label="单位" header-align="left" prop="deviceType" />
        <el-table-column label="联系方式" header-align="left">
          <template v-slot="scope">
            <span v-if="scope.row.modify">{{ scope.row.tel }}</span>
            <el-input v-else v-model="scope.row.tel" @change="cc(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" header-align="left">
          <template v-slot="scope">
            <el-button size="mini" type="text" v-if="scope.row.modify" @click="view(scope.$index, scope.row)">
              修改
            </el-button>
            <el-button size="mini" type="text" v-else @click="save(scope.$index, scope.row)">
              保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      data: [
        {
          deviceType: "类型",
          deviceName: "设备",
          id: 1,
          tel: "18765823218",
          modify: true,
        },
        {
          deviceType: "类型1",
          deviceName: "设备1",
          id: 2,
          tel: "15864715241",
          modify: true,
        },
      ],
      bb: {},
    };
  },
  created() {},
  watch: {
    //监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作
    //只要没有发生变化，就没有办法进行其他的操作
    bb: function (newData, oldData) {
      //newData是更新后的数据
      //oldData是旧数据
      // newData.tel = 1111;
      console.log("监听变化:", newData, oldData);
    },
  },
  methods: {
    // 修改
    view(index, row) {
      row.modify = false;
      this.data[index].modify = false;
      this.bb = this.data[index];
      this.data = JSON.parse(JSON.stringify(this.data));
      console.log("修改：", index, row, this.data[index].modify);
    },
    // 保存
    save(index, row) {
      var regExp = new RegExp("^1[3578]\\d{9}$");
      if (regExp.test(row.tel)) {
        // this.modify = true; //输入框是否为可输入状态
        this.data[index].modify = true;
        this.data = JSON.parse(JSON.stringify(this.data));
      } else {
        console.log("手机号错误");
      }
    },
    cc(index) {
      console.log("更改后的值：", this.data[index]);
      this.bb = this.data[index];
    },
  },
};
</script>

<style scoped>
.road-sprinkler-workload {
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}
.block {
  margin: 6px;
  padding: 12px;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  border-radius: 3px;
  background: #fff;
}
.search-bar {
  padding: 18px 12px 0;
}
.table-bar {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.table-container {
  flex: 1;
}
.zhandian {
  width: 150px;
}
.select {
  width: 126px;
  margin-right: 8px;
}
.reset {
  float: right;
}
</style>