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

最新推荐文章于 2023-08-29 10:42:28 发布

我爱吃西瓜喵

最新推荐文章于 2023-08-29 10:42:28 发布

阅读量3.6k

点赞数 2

分类专栏：填坑文章标签： vue element-ui table

本文链接：https://blog.csdn.net/weixin_43551840/article/details/88788752

版权

填坑专栏收录该内容

17 篇文章 2 订阅

订阅专栏

2020/10 究极版优化代码

<el-table :data="tableData" @cell-dblclick="cellDblclick">
<!-- 下拉 -->
<el-table-column prop="select">
    <template slot-scope="scope">
       <span v-if="!scope.row.isEditSelect" >{{scope.row.select}}</span>
       <el-select
              v-if="scope.row.isEditSelect"
              v-model="scope.row.select"
              filter
              ref="isEditSelect"
              @change="compHidden(scope.row,'isEditSelect')"
              @visible-change="val=>compHidden(scope.row,'isEditSelect',val)"
        >
            <el-option
               v-for="item in dataOptions"
               :key="item.id"
               :value="item.id"
               :label="item.value"
            ></el-option>
        </el-select>
     </template>
</el-table-column>
<!-- 文本框 --> 
<!-- 日期框同文本框，只需要改标签名 -->
<el-table-column prop="input">
        <template slot-scope="scope">
           <span v-if="!scope.row.isEditInput">{{scope.row.input}}
           </span>
           <el-input v-if="scope.row.isEditInput" 
                     v-model="scope.row.input"
                     ref="isEditInput"
                     @keyup.enter.native="compHidden(scope.row,'isEditInput')" 
                     @blur="compHidden(scope.row,'isEditInput')"
            ></el-input>
        </template>
</el-table-column>

注：el-select 一定要下filter属性，这样下拉框获取焦点后才能弹出下拉框

getTableData() {
    this.$axios(url).then(res =>{
        this.tableData = res.data.data
        if (this.tableData.length > 0) {
            this.tableData.forEach(i => {
                i.isEditInput = false;
                i.isEditSelect= false;
            })
        }
    })
}

cellDblclick(row, column) {
    const columnObj = {
        input: 'isEditInput',
        select: 'isEditSelect',
    }
    if (columnObj[column.property]) {
        this.$set(row,columnObj[column.property],true)
        this.tableData.sort()
        this.$nextTick(() => {
            this.$refs[columnObj[column.property]].focus()
        })
    }
}

compHidden(row,property,flag) {
    if (!falg) {
        this.$set(row,property,false)
        this.tableData.sort()
    }
}

分割线后的代码可以不用看了.....我留着以后作对比用

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

补充下拉框编辑的代码

<el-table-column align="center" width="150" label="label">
    <template slot-scope="scope">
       <span v-show="!scope.row.isEditCellData">{{scope.row.data}}</span>
       <el-select
              v-if="scope.row.isEditCellData"
              v-model="scope.row.data"
              placeholder="请选择数据"
              v-on:change="updateRow(scope.row,'data')"
        >
            <el-option
               v-for="item in dataOptions"
               :key="item.id"
               :value="item.id"
               :label="item.value"
            ></el-option>
        </el-select>
     </template>
</el-table-column>

// 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事件

以下是代码：

<el-table :data="tableData" border @cell-dblclick="cellDblClick">
    <el-table-column prop="name" label="名字">
        <template slot-scope="scope">
           <span v-if="!scope.row.isEditCell">{{scope.row.name}}</span>
           <el-input v-if="scope.row.isEditCell" 
                     :autofocus="true"
                     v-model="scope.row.name"                  
                     placeholder="请输入名字" 
                     @blur="cellBlur(可传参)"  //失去焦点事件
            ></el-input>
        </template>
     </el-table-column>
</el-table>

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来拿到，代码我这里重新贴上，原来的不删，作为对比

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

<el-table :data="tableData" border @cell-dblclick="cellDblClick">
    <el-table-column prop="name" label="名字">
        <template slot-scope="scope">
           <span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.name}}
           </span>
           <el-input v-if="scope.row.isEditCell" :autofocus="true" 
                     v-model="scope.row.name" placeholder="请输入名字"
                    @keyup.enter.native="submitName(scope.row)" // 回车保存
                    @blur="cellBlur(scope.row,scope.column)"  //失去焦点事件
                    style="width:70%" ref="inputRef"></el-input>
            <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button>
        </template>
     </el-table-column>
</el-table>

// 获取列表
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=>{})
},