element-UI表格实现双击修改表格数据

最新推荐文章于 2024-09-24 10:41:43 发布

Irene林。

最新推荐文章于 2024-09-24 10:41:43 发布

阅读量3.4k

点赞数 2

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_47396689/article/details/125281516

版权

本文介绍了如何在Vue项目中利用Element UI的El-Table组件实现单元格双击编辑功能。通过监听`cell-dblclick`事件，结合临时变量存储和更新数据，以及`blur`事件触发的API调用来完成信息修改并刷新表格。关键步骤包括设置单元格样式、定义数据属性、编写事件处理函数以及模板内逻辑判断。

摘要由CSDN通过智能技术生成

如何实现对el-Table单元格双击进行修改呢？

step1：在table中，使用@cell-dblclick="editData"事件

<el-table
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :data="tableData"
      @select="select"
      @select-all="selectAll"
      border
      style="width: 100%"
      
      @cell-dblclick="editData">

step2：data中定义'row'，'col'，'tmpRow'

data (){
     return {
        row:'',
        col:'',
        tmpRow:{},
     }
}

step3：在对要编辑的单元格列中step4：方法事件

<el-table-column prop="customerName" label="客户信息" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="row === scope.row.orderId && col == scope.column.id">
            <el-input v-model="tmpRow.customerName" size="mini" @blur="updateuserInfo" />
          </div>
          <div v-else>
            {{ scope.row.customerName }}
          </div>
        </template>
      </el-table-column>

step4：方法事件的实现

/ 双击编辑修改单元格数据
    editData(row, column) {
      this.row = row.orderId
      this.col = column.id
      this.tmpRow = row
      this.tmpRow.orderId = row.orderId
    },

    //修改信息后调用修改信息的Api
    //双击失焦后的事件
    updateuserInfo(){
      updateUserListApi(this.tmpRow).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
          })
          this.getTableData()    //修改信息成功后刷新表格
          //清空数据
          this.tmpRow = {}
          this.row = ''
          this.col = ''
        }
      })
}