devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小丑西瓜9 | 2024-02-19 12:00:31

赞

踩

elementui table 表 编辑时键盘

在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>



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/114581
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号