vue：遇到的坑之-----自定义可编辑表格(element-ui)

补充下拉框编辑的代码

    


// dataOptions的数据我就不列出来了
// isEditCellData为判断是否能编辑的标识，如果没有这个字段可以在获取的时候添加进去，具体代码在下面可以找到
// v-on:change="updateRow(scope.row,'data')" 这个事件的意思是当我进行了下拉选项的选择后就触发

 

// 修改子表单元格事件
    updateRow(row, property) {
      var dataObj= {};
      dataObj.id = row.id;
      dataObj[property] = row[property];
      this.$axios({
        method: "post",
        url: `url`,
        data: dataObj// data根据自己的接口传需要的参数，我这里只需要传id和改变的字段
      }).then(res => {
        if (res.data.type == "success") {
          this.$message.success(res.data.content);
          this.getList(); // 这个函数是获取表格信息的方法，相当于刷新table数据
        } else {
          this.$message({
            type: "error",
            message: res.data.content
          });
        }
      });
    },

 

-----------------------------------------------------------------------------------

这个是input框编辑的代码

首先表头里需要添加 cell-dbclcik事件

   以下是代码：

data(){
    return {
        tableData:[] //要渲染的表数据
    }
}

 注意：input框是根据字段isEditCell的true/false来判断是否出现，如果后台传递过来的数据中没有，可以自己手动添加进去

    // 获取列表
    getTableList() {
      this.$axios
        .get('url')
        .then(res => {      
          var th = this
          th.tableData = res.data.data.rows;  // 渲染表数据

          // 遍历表数据，为每条数据添加isEditCell属性
          var length = th.tableData.length;
          for (var i = 0; i < length; i++) {
            th.tableData[i].isEditCell = false;
          }
          
        });
    },

 

methods:{
     // 单元格双击事件
    cellDblClick(row, column, cell, event) {
      // 判断修改的字段名，我要修改name里的内容
      // column里有个属性叫property
      if (column.property == "name") {
        row.isEditCell = true; //input框出现，span消失
        this.onCellDblClickInput(event); //input框双击回调事件
      } 
    },

     // input框双击回调事件
     onCellDblClickInput(event) {
       //要等到input框渲染到页面后才能获取焦点
      this.$nextTick(function() {
        $(event.target).children().find("input").focus(); //获取input焦点
      });
    },

    // 编辑框失去焦点，即完成编辑
    cellBlur(row) {
      // 数据提交
      this.updateRow(可传参);
    },

    // 修改子表单元格事件，即失去焦点后，向后台发送请求
    updateRow(可传参) {
      var that = this;
      this.$axios.post({
        url: 'url'’,
        data:data
      }).then(res => {
        if (res.data.type == "success") {
          this.$message.success("修改成功！");

          // 成功就刷新表
          this.getTableList()

        } else {
          this.$message({
            type: "error",
            message: res.data.content
          });
        }
      });
    }
}

然后就可以啦，效果我就不展示啦

其实有很多文章都写了这个功能，而且也比我的要完善很多。

我主要是为了记录自己曾经的疑难点^_^，所以希望大家不要在意哈

有问题欢迎指出=3=

--------------------------------

11.15代码完善

发现原来写的代码搞复杂了，获取焦点事件可以直接通过ref来拿到，代码我这里重新贴上，原来的不删，作为对比

这里新增了提交按钮和回车提交功能

// 获取列表
getTableList() {
    this.$axios.get('url').then(res => {      
        var th = this
        th.tableData = res.data.data.rows;  // 渲染表数据

         // 遍历表数据，为每条数据添加isEditCell属性
         var length = th.tableData.length;
         for (var i = 0; i < length; i++) {
           th.tableData[i].isEditCell = false;
         }
          
    });
},
// 双击编辑
cellDblClick(row,column) {
    if (column.property == "name") {
        this.$set(row, "isEditCell", true);
    }
    this.tableData= this.tableData.filter(item => {
      return item;
    }) //视图刷新
    this.$nextTick(() => {
      this.$refs.inputRef.focus(); // 视图出现后使input获取焦点
    })
},

// 可以编辑框失去焦点
cellBlur(row, column) {
    row.isEditCell= false;
    this.$set(row, 'isEditCell', false);
    this.submitName(row)
},

// 提交
submitName(row) {
    if (!row.name) {
        this.$message.warning('请填写内容!');
        return;
    }
    this.$axios.post(url,row).then(res=>{
        this.$message({
          type:res.data.type,
          message:res.data.content
       })
       this.queryTableData(); //刷新数据
    }).catch(e=>{})
},