基于Element table 实现嵌套表格、单元格内编辑及键盘移动

最新推荐文章于 2024-02-05 12:14:45 发布
最新推荐文章于 2024-02-05 12:14:45 发布
阅读量1.4k 收藏 7
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42788798/article/details/103258565
版权

在element table得基础上实现
回车键：单元格内编辑
上下左右：选中单元格移动
在这里插入图片描述
详细代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table :data="tableData" border @cell-click="cellclick" size="mini"  :span-method="arraySpanMethod" default-expand-all>
        <el-table-column type="expand" width="20">
          <template slot-scope="props" v-if="props.row.children.length >0"> <!--props.row.children != undefined-->
              <el-table :data="props.row.children" border @cell-click="cellclick" show size="mini" class="childeTable" :show-header="false">
                  <el-table-column type="index" width="70"></el-table-column>
                  <el-table-column prop="name" min-width="70"></el-table-column>
                  <el-table-column prop="address" min-width="70"></el-table-column>
                  <el-table-column prop="date" min-width="70"></el-table-column>
                  <el-table-column min-width="70"></el-table-column>
                  <el-table-column min-width="70"></el-table-column>
              </el-table>
          </template>
        </el-table-column>
        <el-table-column label="列1">
          <el-table-column prop="date" label="序号" width="70"></el-table-column>
          <el-table-column prop="name" label="列1" min-width="70"></el-table-column>
        </el-table-column>
        <el-table-column label="列2" min-width="70">
          <el-table-column label="列2" min-width="70"></el-table-column>
          <el-table-column label="列3" min-width="70"></el-table-column>
          <el-table-column label="列4" min-width="70"></el-table-column>
          <el-table-column label="列5" min-width="70"></el-table-column>
        </el-table-column>
    </el-table>
    
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
new Vue({
    el: '#app',
    data: function() {
    return { 
        currCell:null,
        parentRow:null,
        tableData: [
            {
                date: '1-1',
                name: '1-2',
                children:[
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',

                },
                {
                    date: '2016',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
                ]
            },
            {
                date: '2-1',
                name: '2-2',
                children:[
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',

                },
                {
                    date: '2016',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
                ]
            },
            {
                date: '3-1',
                name: '3-2',
                children:[
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',

                },
                {
                    date: '2016',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
                ]
            },
            {
                date: '4-1',
                name: '4-2',
                address: '上海市普陀区金沙江路 1516 弄',
                children:[]
            }
        ],
        input:'',
        inputShow:false,
        inputTemplate:'',
        value1:'',
    }
    },
    mounted(){
        document.addEventListener("keyup", this.KeyUp,false)
    },
    methods:{
    cellclick(row, column, cell, event){
        if(this.currCell != undefined || this.currCell != null){
            this.currCell.classList.remove("cell_select")
        }
        if(this.currCell == cell){ //再次点击取消选中 || 失去焦点则取消选中
            this.currCell = null;
            return;
        }
        //设置选中样式
        cell.classList.add("cell_select")
        //存储当前单元格
        this.currCell = cell;
        let t  = this.currCell.closest("tbody")
    },
    KeyUp(e){//全局键盘事件
        e=window.event||e;
        
        if(this.currCell.firstChild.tagName === "INPUT"){ //如果单元格内为输入框，移动事件取消input
            this.currCell.firstChild.removeEventListener("blur",this.blur,false)
            this.blur();
            return;
        }
        let oldCell = this.currCell;
        let listlen = oldCell.parentNode.parentNode.childElementCount;
        let columnlen = oldCell.parentNode.childElementCount
        let rowIndex = oldCell.parentNode.rowIndex //行号
        let columnIndex = oldCell.cellIndex //列号
        
        //下按键触发，换行
        let newCell;
        //向左
        if(e.keyCode == 37){
            if("el-table__row expanded" == this.currCell.parentNode.className){
                if(columnIndex == 0 || columnIndex == 1){
                    return;
                }
            }else{
                if(columnIndex == 0){
                    return;
                }
        }
        newCell = this.currCell.previousElementSibling;
        oldCell.classList.remove("cell_select");
        newCell.classList.add("cell_select");
        this.currCell = newCell
        }
        //向上
        if(e.keyCode == 38){
            //当前行为展开行
            if("el-table__row expanded" == this.currCell.parentNode.className){
                if(rowIndex == 0){
                    return;
                }
                this.parentRow = oldCell.parentNode.previousElementSibling;
                let tbodys = this.currCell.parentNode.previousElementSibling.querySelector('tbody');
                let tlen = tbodys.childElementCount
                
                newCell = tbodys.children[tlen-1].children[1]
                oldCell.classList.remove("cell_select");
                newCell.classList.add("cell_select");
                this.currCell = newCell
            }else{
                if(rowIndex == 0){
                    let x = oldCell;
                    let i=0;
                    while (i != 2) {
                        x = x.parentNode;
                        if(x.tagName == 'TR'){
                            i++
                            this.parentRow = x;
                        }
                    }
                    newCell = this.parentRow.previousElementSibling.children[1];
                    oldCell.classList.remove("cell_select");
                    newCell.classList.add("cell_select");
                    this.currCell = newCell
                }else{
                    newCell = this.currCell.parentNode.previousElementSibling.children[columnIndex]
                    oldCell.classList.remove("cell_select");
                    newCell.classList.add("cell_select");
                    this.currCell = newCell
                }
            }
        }
        //向右
        if(e.keyCode == 39){
            if("el-table__row expanded" == this.currCell.parentNode.className){
                columnlen = 3;
                if(columnIndex == columnlen-1){
                    return;
                }
            }else{
                if(columnIndex == columnlen-1){
                    return;
                 }
            }
        newCell = this.currCell.nextElementSibling;
        oldCell.classList.remove("cell_select");
        newCell.classList.add("cell_select");
        this.currCell = newCell
        }
        //向下
        if(e.keyCode == 40){
            //当前行为展开行
            if("el-table__row expanded" == this.currCell.parentNode.className){
                let tbodys = this.currCell.parentNode.nextElementSibling.querySelector('tbody');
                if(tbodys == null){
                    return;
                }
                this.parentRow = oldCell.parentNode.nextElementSibling;
                newCell = tbodys.firstChild.children[2];
                oldCell.classList.remove("cell_select");
                newCell.classList.add("cell_select");
                this.currCell = newCell
            } else { //是子行
                if(listlen == rowIndex + 1){
                    let x = oldCell;
                    let i=0;
                    while (i != 2) {
                        x = x.parentNode;
                        if(x.tagName == 'TR'){
                        i++
                        this.parentRow = x;
                        }
                    }
                    newCell = this.parentRow.nextElementSibling.children[1];
                    oldCell.classList.remove("cell_select");
                    newCell.classList.add("cell_select");
                    this.currCell = newCell
                }else{
                    newCell = this.currCell.parentNode.nextElementSibling.children[columnIndex]
                    oldCell.classList.remove("cell_select");
                    newCell.classList.add("cell_select");
                    this.currCell = newCell
                }
            }
        }
        if(e.keyCode == 13){
            let vale = oldCell.firstChild.innerHTML
            oldCell.removeChild(oldCell.firstChild)
            let input = document.createElement("input")
            input.value = vale
            input.className="input"
            oldCell.appendChild(input)
            input.focus()
            input.addEventListener("blur", this.blur)
        }
    },
    blur(){
        let currCell = this.currCell
        let value = currCell.firstChild.value
        let cell = document.createElement("div")
        cell.innerHTML = value
        cell.className = "cell"
        currCell.removeChild(currCell.firstChild)
        currCell.appendChild(cell)
        this.currCell=currCell
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
        if(columnIndex == 1){
        return [1,2]
        }
        if(columnIndex == 2){
        return [1,4]
        }
    },
    }
})
</script>
<style>
.cell_select{
box-shadow:inset 0 0 0 1px #409eff;
}
.el-table tbody tr:hover>td { 
background-color:transparent!important
}
.input{
width: 97%;
line-height: 30px;
margin: 0px 3px;
outline:medium;
border:0px solid transparent;
padding:0px;
font-size: 12px;
}
.el-table td{
padding: 0;
}
.cell{
margin: 5px 0;
padding-left: 2px;
}
.el-table__expanded-cell[class*=cell]{
padding: 0 0 0 19px;
}
.childeTable >.el-table__body-wrapper {
overflow-x: hidden;
} 
.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
padding-left: 2px;
}
.el-table .cell, .el-table th div{
padding-right: 2px;
}
.el-table th>.cell{
line-height: 15px;
}
</style>
</html>
xibobos
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
element-ui中Table表格省市区合并单元格的方法实现
01-19
本文介绍了element-ui中Table表格省市区合并单元格的方法实现，分享给大家，具体如下： 效果如图 代码如下: <el-b
vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换
az44yao的专栏
01-17 4341
通过我的测试我发现两个两种方法来编辑单元格的内容 第一种点击编辑： 我是给td里添加一个input，将值赋值给input，当失去焦点的时候将input的值付给td原来的内容，然后将input删除， 代码如下： 　let oldel = cell.children[0] if (column.label != "日期") { if(cell.children.length>1){return} 防止点击cell再次创建input输入框 va
Vue ElementUI中el-table表格嵌套样式问题
最新发布
lemon今天学习了吗？的博客
02-05 2305
1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了，实际上接口数据并不是都有children数组；1、两个表格嵌套，当父表格有children数组时子表格才展示；2、在表格嵌套后，打开子表格，高亮显示在经过子表格后对应不上；2、子表格数据少于父表格展示字段，且对应固定操作列不同；3、父表格的操作列固定在右侧影响了子表格的显示；4、滑动到表格底部时，父子表格的固定列对不齐；
上下左右键控制table中光标(兼容多浏览器)
01-25
js绑定input框实现上下左右键和Enter键控制table中光标的移动，光标移至最后一个input框处，按enter键新增一行。（多浏览器可用）
优雅的elementUI table单元格可编辑实现方法详解
10-17
主要介绍了优雅的elementUI table单元格可编辑实现方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui 表格实现单元格可编辑的示例
12-29
如下所示： <template> <el data=tableData cell-mouse-enter=handleMouseEnter cell-mouse-leave=handleMouseOut xss=removed> <el label=日期 width=180> <template scope=scope> <span v-if=!scope.row.editFlag>{{ scope.row.name }}</span> <span v-if
vue+element-ui 实现table单元格点击编辑，并且按上下键移动
一撇一画的博客
06-20 2561
1.接到需求是点击键盘上下键，控制输入框移动方便输入数据 2.相关实现代码 <el-table-column label="Pageviews" width="110" align="center"> <template slot-scope="scope"> <el-input-number style="width:90%" :controls="false" :min="0" @input.nati
vue3+Element-Plus+js 解决表格按住上下左右获取焦点
m0_61629964的博客
08-04 1418
vue3+Element-Plus+js 解决表格按住上下左右获取焦点
vxe-table 键盘上下左右控制选中区域移动[3]
wanghanlu_的博客
08-24 664
接下来来实现一下通过键盘的上下左右键来控制选择区域的移动。鼠标滑动选择的博客。该博客是建立在上面那个博客的基础上。2.根据具体按的哪个键的去改变存储区域框的位置的变量。2.添加两个方法tableKeydown，1.给表格添加按键事件@keydown。1.需要给表格添加键盘按键事件。因为我们需要获取当前行的位置。3.然后显示区域框.
用vue+element实现表格键盘上下键单选中行效果
xt_XiTu的博客
06-19 2938
使用element的table组件，如果还想要实现上下键选中行效果的话，可以试试以下方法，主要是通过监听键盘事件实现的 如果还需要表格上下键时保持被选中行一直在视野中的话，可以在监听事件中根据当前行的位置动态设置表格的滚动距离实现，现在先不加了，等有时间再完善 1、首先定义一个变量，来确定当前被点击行的index，再根据监听到的是上键或者下键，递减或递增此变量，通过element table的toggleRowSelection方法实现对当前行的勾选选中，具体代码作用已在备注中 代码如下： keyUp(e)
vue+elementui 中 @keyup 键盘上下左右移动聚焦
dianmei9350的博客
05-14 2767
　　　　　　　　　　　　<template> 　　　　　　　　　　　　<el-table :data="CreditUnclearOutlineList" border style="width: 100%" ref="table"> <el-table-column ali...
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第...
elementui表格插槽使用的input输入框，添加键盘快捷键上下左右箭头，获取焦点
lurenlinshen的博客
02-28 1433
elementui表格插槽使用的input输入框，添加键盘快捷键上下左右箭头，获取焦点
element input输入框自动获取焦点
热门推荐
萝卜砸大坑
10-25 9万+
最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。 但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了 document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果： 原理其实很简单，Element 已经提供了 focus...
基于element-ui el-table el-form 表格嵌套表单 并且之前表格搜索和全键盘操作
漫无目的猿猿的博客
06-11 1772
项目开发中的记录，提出了业务代码 ，场景是自己临时想的 主要是两点 场景 假设一个淘宝店家周年庆给老会员发福利了，需要创建一系列的发货地址，要求客户的信息不能手动输入，需要从会员里面获取自动填充 要求 店家是一个老顽固，或者不喜欢使用鼠标所以需要全键盘来操作 1、table 和 form的相互嵌套，表格中表单项的校验 2、参考el-select 源码 的全键盘操作表格 一贯作风先附上效果图，然后放git源码路径 git 源码地址 ...
el-table实现通过按钮控制编辑单元格内容
qq_45995090的博客
07-04 1042
实现一个在表格内可编辑的列，通过点击按钮控制显示输入框，编辑单元格内容
vue3 element-plus el-table 实现指定单元格编辑
anwenagululu的博客
10-19 3331
首先要知道是哪一行需要修改，当点击时修改，回车保存​ 在el-table上 绑定 单元格的点击事件cell-click(单击)cell-dblclick(双击) ​
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
qq_36958916的博客
02-07 5690
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
Vue+ElementUI中表格嵌套的使用方法
m0_66722601的博客
02-21 5351
Vue+ElementUI中表格嵌套的使用方法
Element Table 单元格中嵌套表格（Table） 合并行效果
07-13
在 Element Table 单元格中嵌套表格，并合并行的效果，可以通过使用 colspan 属性来实现。colspan 属性定义了单元格横向跨越的列数。 下面是一个示例代码，展示了如何在 Element Table 单元格中嵌套表格，并实现合并行的效果： ```html <table> <tr> <td rowspan="2">主表格单元格1</td> <td>主表格单元格2</td> <td>主表格单元格3</td> </tr> <tr> <td colspan="2"> <table> <tr> <td>嵌套表格单元格1</td> <td>嵌套表格单元格2</td> </tr> </table> </td> </tr> </table> ``` 在上述示例中，主表格的第一个单元格使用 rowspan="2" 属性，表示该单元格会跨越两行。而嵌套表格则放置在主表格的第二行，第二列的单元格中。其中，嵌套表格的第一个单元格使用 colspan="2" 属性，表示该单元格会跨越两列。 通过这种方式，你可以实现在 Element Table 单元格中嵌套表格，并合并行的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值