Vue table新增、编辑解读

  <template slot-scope="{ row }">
            <span v-show="!row.isEdit">{{ row.intentionName }}</span>
            <!-- <el-input v-show="row.isEdit" v-model="row.intentionName"></el-input> -->
            <el-select
              v-show="row.isEdit"
              v-model="row.intentionName"
              filterable
              remote
              placeholder="请输入热词"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>

 //添加按钮
       AddHotWordsShow () {
        let message = ''
        let flag = true
        this.tableData.forEach((item, index) => {
          if (item.isAdd) {
            message = '请先保存或取消您正在新增的数据'
            flag = false
            return
          }
          if (item.isEdit) {
            message = '请先保存或取消您正在编辑的数据'
            flag = false
          }
        })
        if (!flag) {
          this.$message({
            type: 'info',
            message: message
          })
          return
        }
        // this.isAddButton = true
        // 新增一条对象
        const AddObj={
          intentionName: '',
          isEdit: true,
          isAdd: true
        }
        // 添加到这个表格里面去
        this.tableData.push(AddObj)
      },

 <template slot-scope="scope" >
            <div v-if="!scope.row.isEdit">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small" @click="ClickDelete(scope.row)">删除</el-button>
            </div>
            <div v-else>
              <el-button @click="dialogFormVisible(scope.row)" type="text" size="small">保存</el-button>
              <el-button type="text" size="small" @click="cancel(scope.row,scope.$index)">取消</el-button>
            </div>
          </template>

     // 初始化数据
          tableData: [{
          id: 0, //意图配置id
          intentionId: "", //意图id
          virtualEmployeeId: 0, //虚拟员工id
          sortNum: 0, //排序
          createTime: "2022-10-14 11:30:16",
          updateTime: "2022-10-14 11:30:17",
          updateUser: "张三",
          intentionName:'热词', //热词
          isEdit: false,
          // isAddButton:false,
          value: ''
        }
      ],
        // 搜索数据
        searchInputValue: '',
        // 新增远程搜索
        options: [],
        newAddValue: '',
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
        }

      // 修改编辑
      handleClick(row, index) {
        let message = ''
        let flag = true  // 加锁
        this.tableData.forEach((item, index) => {
          if (item.isAdd) {
            message = '请先保存或取消您正在新增的数据'
            flag = false
            return
          }
          if (item.isEdit) {
            message = '请先保存或取消您正在编辑的数据'
            flag = false
          }
        })
        if (!flag) {
          this.$message({
            type: 'info',
            message: message
          })
          return
        }
        // 备份原始数据
        row['oldRow'] = JSON.parse(JSON.stringify(row))
        row.isEdit = true
      },

  // 取消
      cancel(row,index){
        // 如果是新增的数据
        console.log(row);
      if (row.isAdd) {
        this.tableData.splice(index, 1)
        // this.$refs.formTable.resetFields()
      } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
          row[i] = row.oldRow[i]
        }
        row.isEdit = false
      }
      },