ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格

在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态,失去焦点时还原表格显示。

实现思路:

  • 在数据中增加isFocus:false.控制是否显示
  • 在table中用@cell-dblclick双击方法

先看效果:

上源码:在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示

javascript 复制代码
<el-table :data="tableData" border stripe style="width: 100%"  @cell-dblclick="tabClick">
    <el-table-column prop="date" label="Product Name" width="180"></el-table-column>
    
    <el-table-column prop="address" label="地址"></el-table-column>

    <el-table-column prop="price" label="姓名1"  width="180">
        <template slot-scope="scope">
            <el-input v-if="scope.row.isFocus && focusLabelName=='姓名1'" v-focus size="small" v-model="scope.row.price" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input>
            <span v-else>{{scope.row.price}}</span>
        </template>
    </el-table-column>

    <el-table-column prop="price" label="姓名2"  width="180">
        <template slot-scope="scope">
            <el-input v-if="scope.row.isFocus && focusLabelName=='姓名2'" v-focus size="small" v-model="scope.row.price2" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input>
            <span v-else>{{scope.row.price2}}</span>
        </template>
    </el-table-column>
</el-table>

方法:

javascript 复制代码
data: function () {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                price: 1000,
                price2: 1000,
                price3: 1000,
                isTransfer: true,
                rate: 0.3,
                amount: 1000,
                isFocus: false,
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                price: 1000,
                isTransfer: false,
                rate: 0.3,
                amount: 1000,
                isFocus: false,
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                price: 1000,
                price2: 1000,
                price3: 1000,
                isTransfer: true,
                rate: 0.3,
                amount: 1000,
                isFocus: false,
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                price: 1000,
                price2: 1000,
                price3: 1000,
                isTransfer: false,
                rate: 0.3,
                amount: 1000,
                isFocus: false,
            }],
            focusLabelName:''
        }
    },
    methods: {
        tabClick(row, column, cell, event)
        {
            console.log(row, column, cell);
            row.isFocus = true;
            this.focusLabelName = column.label;
            
        },
        blurInput(row)
        {
            row.isFocus = false
        }
    }
相关推荐
豆苗学前端1 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
我命由我1234532 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
快起来别睡了37 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
扶我起来还能学_1 小时前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
张旭超1 小时前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
亿坊电商2 小时前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
程序猿小D2 小时前
[附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
数据库·vue.js·spring boot·mysql·毕业设计·推荐算法·学生咨询系统
我爱加班、、2 小时前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉2 小时前
vue快速上手
前端·javascript·vue.js
大菠萝学姐2 小时前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue