Vue+element实现树状表格结构编辑+上下左右移动聚焦的input框+回车插入行+可编辑树形结构

于 2024-07-23 18:01:52 发布
阅读量270 收藏
点赞数 8
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Edosin_Hu/article/details/140641638
版权

备注的输入框按回车可以直接插入一行

直接上垃圾代码需要的自己改去吧

html部分

<template>
            <div class="right">
                <div style="width: 100%;margin: 0 auto;text-align: center; margin-bottom: 50px;">
          
                    <div style=" margin-top: 30px; text-align: left;padding: 20px;min-height: 600px;">
                        <div style="display: flex;display: flex;">
                            <div class="topinfo setBackgroundBlue" style="width: 150px;"> 序号</div>
                            <div class="topinfo setBackgroundBlue" style="width: 280px;">名称</div>
                            <div class="topinfo setBackgroundBlue" style="width: 200px;">
                                <div style="height: 25px;line-height: 25px;">
                                    时间
                                </div>
                                <div style="display: flex;">
                                    <div class="topinfo" style="height: 25px;line-height: 25px;flex: 1.5;">
                                        年
                                    </div>
                                    <div class="topinfo" style="height: 25px;line-height: 25px;flex: 1;">
                                        月
                                    </div>
                                    <div class="topinfo" style="height: 25px;line-height: 25px;flex: 1;">
                                        日
                                    </div>
                                </div>
                            </div>
                            <div class="topinfo setBackgroundBlue" style="width: 70px;"> 页数</div>
                            <!-- <div class="topinfo" style="width: 70px;"> 份数</div> -->
                            <div class="topinfo setBackgroundBlue" style="flex: auto;;">备注</div>
                        </div>
                        <div style="margin-bottom: 100px;" @keydown="handleKeydown" tabindex="0">
                            <el-table :data="treeData1" style="width: 100%;margin-bottom: 20px;" row-key="nodeId" border
                                :cell-class-name="setBackgroundBlue" class="exporttable" :show-header="false"
                                default-expand-all :tree-props="{ children: 'children' }"
                                :cell-style="{ borderColor: 'black' }" :header-cell-style="{ borderColor: 'black' }">
                                <el-table-column prop="nodeIndex" label="序号" width="150">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row.children || scope.row.children.length == 0">
                                            {{ getindex(scope.row) }}
                                            <!-- <el-input v-model="scope.row.nodeIndex" placeholder="请输入"></el-input> -->
                                        </div>
                                        <div v-else>
                                            {{ scope.row.nodeIndex }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nodeName" label="履历材料" width="280">
                                    <template slot-scope="scope">
                                        <div :style="{ width: '100%' }"
                                            v-if="!scope.row.children || scope.row.children.length == 0">
                                            <el-input v-model="scope.row.nodeName" placeholder="名称"
                                                @focus="handleFocus"></el-input>
                                        </div>
                                        <div v-else>
                                            {{ scope.row.nodeName }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nodeDate" label="时间" width="200">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row.children || scope.row.children.length == 0"
                                            style="display: flex;">
                                            <!-- <el-date-picker type="date" v-model="scope.row.nodeDate" format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请选择"
                                                clearable></el-date-picker> -->
                                            <el-input v-model="scope.row.year" placeholder="年" style="flex: 1.5;"
                                                @focus="handleFocus"></el-input>
                                            <el-input v-model="scope.row.month" placeholder="月" style="flex: 1;"
                                                @focus="handleFocus"></el-input>
                                            <el-input v-model="scope.row.day" placeholder="日" style="flex: 1;"
                                                @focus="handleFocus"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nodePages" label="页数" width="70">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row.children || scope.row.children.length == 0">
                                            <el-input v-model="scope.row.nodePages" placeholder="0"
                                                @focus="handleFocus"></el-input>
                                        </div>
                                        <div v-else>
                                            {{ scope.row.nodePages }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column prop="nodeCopies" label="份数" width="70">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row.children || scope.row.children.length == 0">
                                            <el-input v-model="scope.row.nodeCopies" placeholder="0"></el-input>
                                        </div>
                                        <div v-else>
                                            {{ scope.row.nodeCopies }}
                                        </div>
                                    </template>
                                </el-table-column> -->
                                <el-table-column prop="nodeNotes" label="备注" min-width="120">
                                    <template slot-scope="scope">
                                        <div v-if="!scope.row.children || scope.row.children.length == 0"
                                            :style="{ width: '100%' }"
                                            @keydown.enter="handleClickRow(scope.row, 'hang')">
                                            <el-input v-model="scope.row.nodeNotes" placeholder="备注"
                                                @focus="handleFocus"></el-input>
                                        </div>
                                        <div v-else>
                                            {{ scope.row.nodeNotes }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="aotu" :align="'center'">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-button @click="handleClickRow(scope.row, 'jiedian')" type="text"
                                                v-if="findNodeLevelAndPosition(treeData1, scope.row).length <= 1"
                                                size="small">+节点</el-button>
                                            <el-button @click="handleClickRow(scope.row, 'zjd')" type="text"
                                                v-if="!scope.row.nodeDate && findNodeLevelAndPosition(treeData1, scope.row).length < 2"
                                                size="small">+子节点</el-button>
                                            <el-button @click="handleClickRow(scope.row, 'zx')" type="text"
                                                v-if="scope.row.children && findNodeLevelAndPosition(treeData1, scope.row).length < 3"
                                                size="small">+子项</el-button>
                                            <el-button @click="handleClickRow(scope.row, 'del')" type="text"
                                                size="small">删除</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                </div>
            </div>
</template>

js部分

<script>
import { customAlphabet } from 'nanoid'//生成id用的
export default {
    data() {
        return {
            treeData1: [],
            selectedKey: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            currentRow: 0,//现在是第几列
            currentColumn: 0,//现在是第几行
            columns: 6,//每行有多少个输入框
        }
    },
    created() {

    },
    computed: {
        numberOfColumns() {
            return this.currentColumn * this.columns
        },
        numberOfRows() {
            return document.querySelectorAll('.exporttable input').length - 1
        }
    },
    mounted() {
//第一个输入框自动获焦 使键盘可控制焦点
        setTimeout(() => {
            let inputs = document.querySelectorAll('.exporttable input');
            inputs[0].focus();
        }, 500);
    },
    methods: {
//鼠标点击输入框后修正焦点位置
        handleFocus(event) {
            let selected = event.target
            let inputs = document.querySelectorAll('.exporttable input')
            let index = Array.from(inputs).indexOf(selected);
            this.currentRow = index % this.columns
            this.currentColumn = Math.floor(index / this.columns)
        },
//键盘上下左右移动input获焦
        handleKeydown(event) {
            switch (event.keyCode) {
                case 38: // 上
                    if (this.currentColumn > 0) {
                        console.log("上");
                        this.currentColumn--;
                        console.log("现在是第几行", this.currentColumn);
                    }
                    break;
                case 40: //下
                    if (this.currentColumn < this.numberOfRows / 6 - 1) {
                        console.log("下");
                        this.currentColumn++;
                        console.log("现在是第几行", this.currentColumn);
                    }
                    break;
                case 37: // 左
                    if (this.currentRow > 0) {
                        console.log("左");
                        this.currentRow--;
                        console.log("现在是第几列", this.currentRow);
                    }
                    break;
                case 39: // 右
                    if (this.currentRow < this.columns - 1) {
                        console.log("右");
                        this.currentRow++;
                        console.log("现在是第几列", this.currentRow);
                    }
                    break;
            }
            const inputs = document.querySelectorAll('.exporttable input');
            const index = this.numberOfColumns + this.currentRow; // Calculate input index based on row and column
            if (inputs.length > index) {
                inputs[index].focus();
            }
        },
        //计算序号
        getindex(clickedRow) {
            const positionInTree = this.findNodeLevelAndPosition(this.treeData1, clickedRow);
            if (positionInTree.length == 1) {
                return this.treeData1.indexOf(clickedRow) + 1;
            }
            if (positionInTree.length == 2) {
                return this.treeData1[positionInTree[0]].children.indexOf(clickedRow) + 1;
            }
            if (positionInTree.length == 3) {
                return this.treeData1[positionInTree[0]].children[positionInTree[1]].children.indexOf(clickedRow) + 1;
            }
        },
        setBackgroundBlue({ row }) {
            if (!row.children || row.children.length == 0) {

            } else {
                return 'setBackgroundBlue'
            }
        },
//还原在tree中的路径
        findNodeLevelAndPosition(data, clickedRow) {
            const path = [];
            const findPath = (node, targetId) => {
                for (let j = 0; j < node.length; j++) {
                    if (node[j].nodeId === targetId) {
                        path.push(j);
                        return true;
                    }
                    if (node[j].children) {
                        for (let i = 0; i < node[j].children.length; i++) {
                            const childs = node[j].children[i];
                            if (childs.nodeId == targetId) {
                                path.push(j);
                                path.push(i);
                                return true;
                            }
                            if (node[j].children[i].children) {
                                for (let k = 0; k < node[j].children[i].children.length; k++) {
                                    const child = node[j].children[i].children[k];
                                    if (child.nodeId == targetId) {
                                        path.push(j);
                                        path.push(i);
                                        path.push(k);
                                        return true;
                                    }
                                }
                            }
                        }
                    }
                }
            };
            findPath(data, clickedRow.nodeId);
            return path;
        },
        handleClickRow(clickedRow, type) {
            const positionInTree = this.findNodeLevelAndPosition(this.treeData1, clickedRow);
            console.log("此行在数据中的位置路径:", positionInTree);
            let nanoid = customAlphabet('1234567890', 4)
            // let id = nanoid()
            console.log("id:", positionInTree.length);
            if (type == 'del') {
                if (positionInTree.length == 1) {
                    this.treeData1.splice(positionInTree[0], 1,)
                }
                if (positionInTree.length == 2) {
                    this.treeData1[positionInTree[0]].children.splice(positionInTree[1], 1,)
                }
                if (positionInTree.length == 3) {
                    this.treeData1[positionInTree[0]].children[positionInTree[1]].children.splice(positionInTree[2], 1,)
                }
            }
            if (type == 'jiedian') {
                let data = {
                    nodeId: nanoid(),
                    nodeIndex: "",
                    nodeName: '',
                    nodeNotes: "",
                    children: []
                }
                if (positionInTree.length == 1) {
                    this.treeData1.splice(positionInTree[0] + 1, 0, data)
                }
                if (positionInTree.length == 2) {
                    this.treeData1[positionInTree[0]].children.splice(positionInTree[1] + 1, 0, data)
                }

            }
            if (type == 'zjd') {
                if (positionInTree.length == 1) {
                    this.treeData1[positionInTree[0]].children.push({
                        nodeId: nanoid(),
                        nodeIndex: "",
                        nodeName: '',
                        nodeNotes: "",
                        children: []
                    })
                }
                if (positionInTree.length == 2) {

                }
            }
            if (type == 'zx') {
                if (positionInTree.length == 1) {
                    this.treeData1[positionInTree[0]].children.push({
                        nodeId: nanoid(),
                        nodeIndex: "",
                        nodeName: '',
                        nodeDate: '',
                        nodePages: null,
                        nodeNotes: "",
                        nodeCopies: "",
                        children: [],
                    })
                }
                if (positionInTree.length == 2) {
                    this.treeData1[positionInTree[0]].children[positionInTree[1]].children.push({
                        nodeId: nanoid(),
                        nodeIndex: "",
                        nodeName: '',
                        nodeDate: '',
                        nodePages: null,
                        nodeNotes: "",
                        nodeCopies: "",
                    })
                }
            }
            if (type == 'hang') {
                if (positionInTree.length == 2) {
                    this.treeData1[positionInTree[0]].children.push({
                        nodeId: nanoid(),
                        nodeIndex: "",
                        nodeName: '',
                        nodeDate: '',
                        nodePages: null,
                        nodeNotes: "",
                        nodeCopies: "",
                        children: [],
                    })
                }
                if (positionInTree.length == 3) {
                    this.treeData1[positionInTree[0]].children[positionInTree[1]].children.push({
                        nodeId: nanoid(),
                        nodeIndex: "",
                        nodeName: '',
                        nodeDate: '',
                        nodePages: null,
                        nodeNotes: "",
                        nodeCopies: "",
                    })
                }
            }
        }
    }
}
</script>

样式

<style lang="scss" scoped>
.topinfo {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }

        .exporttable {
            border: solid 1px black;
        }
  ::v-deep .cell {
        display: flex;
        align-items: center;
    }

    ::v-deep .setBackgroundBlue {
        background-color: #DAE5F6;
    }
</style>

Edosin_Hu
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于element ui 树形表格，实现对树形表格的增、删功能。
qq_66033663的博客
11-20 401
基于element ui 树形表格，实现对树形表格的增、删功能。
el-table 树形表格动态添加行 vue
weixin_48433218的博客
06-12 1457
有个需要需要点击表格的某一行，动态在那一行插入子节点，但是我直接根据element ui组件的方法，获取到当行的数据，并push进去，虽然添加进表格数据了，但表格没有响应式更新，查了下发现可以用this.$set不刷新页面强制更新table的数据...
element el-table（表格/树形表格）添加、编辑、合并单元格
weixin_45665171的博客
05-06 3347
element el-table（表格/树形表格）添加、编辑、合并单元格。 添加：给树形子级添加一行，滚动到添加行并聚焦。 编辑：双击编辑并聚焦到输入框。
Vue（十九）：ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
01-30 1340
ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能
【VUE】Vue中实现树状表格结构编辑与版本对比的详细技术实现
最新发布
九日的博客
04-24 1522
在data函数中定义的tableData数组，包含了表格数据和结构信息。此外，我们会备份原始数据以供版本对比之用。data() {return {},// 模拟加载物料信息},methods: {...item,level,parent,}));},// 示例方法：模拟加载物料信息this.materials = [{ materialsTypeId: 1, materialsTypeName: '物料1' }];
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
i_am_a_div的博客
12-23 5851
vue+element实现树状表格，使用树形数据与懒加载实现树状表格的增删改查
vue jsx 封装Table 表格+Tree 树形控件
老司机的后备箱
09-29 1543
通过表格展示树的层级，可通过对树的勾选对每一个界面的dom元素进行控制，控制程度可精确到组件/标签整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue+Element-ui实现树形组件、表格树
热门推荐
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
Vue2 + element ui 后台管理系统（项目总结）
m0_70851631的博客
05-12 5780
1，准备需要框架，插件，组件库...... Vue框架 （vue2.x版本） Element Ul 组件 axios (网络请求,请求拦截器，响应拦截器) quill（富文本编辑器） echarts（数据可视化工具） 1-1，axios的封装 axios的封装包含了（请求拦截器，响应拦截器，创建的时候设置请求超时时间） 请求拦截器（经常用来设置请求头，用户登录后像后台发送token，这个token可以判断我们是否登录成功） 响应拦截器（做一些token过期处理，还可以对后台返回给我们的状态码
基于vuejs实现树形表格的封装vuetreetable
08-10
基于vue.js实现树形表格的封装（vue-tree-table）
vue 实战技巧之el-tree使用技巧
追梦&天空的博客
06-26 1793
然后我们在查询某一个节点的时候，先查询一下当前节点是否已经存在于存储器中了，如果已经存在，则只需将该节点显示出来即可，然后再查找当前节点是否存在下一级，如果存在，则继续向下查找，直到最后以及，并把当前节点下一级的所有节点。是无法做到在查询到父节点时带出父节点下所有的子节点数据的，所以在我们查询到某一个节点时，首先要判断当前节点是否还有下一级的节点，如果有，则对下一个层级的节点进行递归遍历查出所有的子节点。通过上面 【过滤 el-tree 节点，仅保留当前层级的节点数据】的介绍，我们可以知道，简单的使用。
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 5432
h5(html5)+css3+移动端前端 知识点详细总结
黑马Vue电商
xwq997997的博客
11-19 1520
Vue 开发电商后台管理系统一、项目技术栈1、1 前端2、1 后端二、开发流程2、1 登陆和退出2-1-1 登陆页面2、2 首页 前言： 最近发现养成记录的习惯真的太好了，本人习惯于用笔记记录，但是关于项目流程这些，其实没有一个特别系统化的认知，最近刷b站黑马的vue电商视频，再看到有很多小伙伴都记录了自己的开发流程，于是我决定把他摸出来记录一下！ 这里参考了以下2个链接，都写的太棒拉！ 参考1. 参考2. 参考3. 一、项目技术栈 1、1 前端 创建项目以后我直接用包管理器安装的，饿了么也是使用的
vue 电商后台管理
kanami154的博客
05-12 1000
本项目使用vue2 搭配element-ui框架完成
在vue中实现树形结构的表格，以及对数据结构的处理
多看书少吃饭的博客
01-12 1770
在vue中实现树形结构的表格
树状表格子节点移动 - 在Vue.js中实现上下移动子节点的表格功能
Blog of Leviash
08-28 937
本文介绍了如何在Vue.js框架下实现一个树状表格，其中支持选择子节点行的上下移动。通过这个功能，用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
VUE2 Element表格树形结构实现单节点展开
m0_61355338的博客
07-01 1079
element表格实现单分支展开
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值