ElementUI实现可编辑表格

最新推荐文章于 2024-09-16 17:51:15 发布

前端杨小白

最新推荐文章于 2024-09-16 17:51:15 发布

阅读量7.2k

点赞数 7

分类专栏： ElementUI

本文链接：https://blog.csdn.net/yangwqi/article/details/106565227

版权

ElementUI 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

实现效果：

【可编辑单元格】双击某个单元格该单元格变为input输入框编辑修改目标单元格；并通过v-focus让input自动获取焦点
input输入框失去焦点时 input输入框隐藏展示默认Table

<el-table :data="paramTable" border tooltip-effect="light" size="mini" @cell-dblclick="cellClick">
    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
    <el-table-column prop="factorLevel" label="值" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.factorLevel" v-if="scope.row.flag" @blur="inputClick(scope.row)" v-focus></el-input>
            <span v-if="!scope.row.flag">{{scope.row.factorLevel}}</span>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center" width="90px">
        <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete"></el-button>
        </template>
    </el-table-column>
</el-table>  
<script>
export default {
    data(){
        return{
            paramTable:[{
                factorLevel:1,
                flag:false
            },{
                factorLevel:2,
                flag:false
            },{
                factorLevel:3,
                flag:false
            }]
        }
    },
    directives: {
        // 注册一个局部的自定义指令 v-focus
        focus: {
            // 指令的定义
            inserted: function (el) {
                // 聚焦元素
                el.querySelector('input').focus()
            }
        }
    },
    methods: {
        //双击单元格后，显示input，并通过v-focus让input自动获取焦点
        cellClick(row){
            row.flag=true
            console.log(row)
        },
        //input框失去焦点事件
        inputClick(row){
            row.flag=false
        }
    }    
}
</script>

双击单元格后，显示input，并通过v-focus让input自动获取焦点