el-table树形数据，修改箭头所在列。并设置树节点的缩进

已于 2023-02-04 14:01:29 修改
阅读量6.8k 收藏 9
点赞数 6
分类专栏： VUE 文章标签： vue.js
于 2021-01-13 16:46:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdcainiao/article/details/112573049
版权

一、修改箭头所在列

1. 效果：在这里插入图片描述

2. 方法：

给前面的所有列，即 el-table-column 设置 type=""


二、设置树节点的缩进

第一步： 给 el-table 标签设置 :indent='indents'

第二步： 在data 中设置缩进的距离 indents: 0,

往者不可谏, 来者犹可追
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 element[email protected]，使用前请熟悉： element[email protected] element[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
记录-el-table展示树形数据时第三级以及之后级的数据无法展示的问题
最新发布
qq_43602268的博客
11-20 488
加了之后就正常展示了。
树形表格的小箭头更换位置不从第一列开始
趟过java，遇见web
12-13 563
树形表格，el-table，小箭头
el-tab懒加载显示的箭头距离调整。
weixin_48050571的博客
06-30 386
如图所示，箭头间距宽度。调整间距 在表格属性中有 indent 这个参数可以控制宽度 使用方式如下
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　　2. cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 　　3. header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 　　4. header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Ob
el-table显示树形数据报错
小方块的世界
06-08 2759
问题描述 el-table显示树形数据报错 Error: for nested data item, row-key is required TypeError: this.$el.querySelectorAll is not a function 问题分析 后端返回的树形结构中没有返回id字段，所以需要手动遍历数据给数据添加id，el-table中默认设置row-key=“id” ，没有id，又没有设置row-key的值这时就会报错。 问题解决 递归数据 recursive(data) {
若依前端vue使用之树形结构中修改子类缩进量
一起加油吧~
12-08 804
其实我也不知道算不算vue的，反正就是自己遇到过的，都简单记录一下。欢迎大家指正~
ElTable实现空单元格自动填充占位符
CSU_Zipple的博客
04-09 7509
ElTable实现空单元格自动填充占位符‘–’ 根据前端开发规范及UE建议，考虑给表单的空单元格插入占位符‘–’，一开始的想法很简单，在el-table-column中渲染时对传入的data进行判断即可，相关代码如下： <el-table-column label="按键" width="100px"> <span class="c-one-line did-desc-t...
更改elementui的树状表格展开样式
hahah1234111111的博客
09-23 1731
改造elementui树表格
基于element-ui表格二次封装
shiyzhang
02-05 967
之前有基于element-ui表格单独的而封装表格， 文章目录主要封装tables文件excel前端导出文件对象深拷贝请求方式使用方式1、传入url表格组件自动处理请求数据2、数据在外部请求 elementUI版本 "element-ui": "^2.15.0" （element官网） 本次封装移植了elementUI上的所有方法，只需要通过columns去配置即可 本次二次封装中集成了，表格分页，前端下载（支持下载当前页和指定数据量数据），表格列筛选功能 使用时注意文件路径。 文章结尾会有使用示.
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
el-table加入无限滚动，并且可以控制列是否显示以及列的排序，不是网上大部分的json配置形式
el-input 监听输入事件、键盘事件、粘贴事件、失去焦点事件
热门推荐
大前端
12-31 1万+
@paste.native=“usernamePaste” 监听粘贴事件 @keyup.native=“userNameInput($event)” 监听键盘事件 <el-input placeholder="请输入身份证号" @paste.native="usernamePaste" @keyup.native="userNameInput($event)" id="username" v-model="usern
js循环调用接口
大前端
07-05 7702
js循环调用接口，获取多页数据
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
大前端
08-16 7101
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
webpack解决跨域问题
大前端
04-16 3322
一、生产环境跨域：请参考 nginx解决跨域问题 二、开发环境跨域： 使用vue-cli搭建的前端项目，可通过配置vue.config.js文件解决。 module.exports = { // 配置代理，解决跨域问题 devServer: { port: '8080', // 设置端口号 https: false, //是否使用https协议 hotOnly: false, //是否开启热更新 proxy: { '/api': { t
vue将配置文件设为全局变量
大前端
07-04 2342
vue配置文件，全局变量
el-table树形数据案例
05-24
以下是一个使用 el-table 实现树形数据的简单示例： ```html <template> <el-table :data="tableData" :row-key="getRowKey" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-table :data="props.row.children"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: "父节点1", age: 30, children: [ { name: "子节点1", age: 20 }, { name: "子节点2", age: 25 } ] }, { name: "父节点2", age: 35, children: [ { name: "子节点3", age: 28 }, { name: "子节点4", age: 32, children: [ { name: "孙子节点1", age: 5 }, { name: "孙子节点2", age: 3 } ] } ] } ] }; }, methods: { getRowKey(row) { return row.name; // 使用每一行的名称作为唯一标识符 } } }; </script> ``` 上面的示例中，我们使用嵌套的 el-table 组件来展示树形数据。在父节点的行上，我们使用了 `type="expand"` 的 el-table-column 组件，并在其 slot 中渲染了另一个 el-table 组件，用来展示该父节点的子节点数据。 在子节点的行上，由于没有子节点，因此不会再次渲染 el-table 组件。我们可以通过在 `getRowKey` 方法中指定一个唯一标识符来确保每一行都有一个唯一的 key 值，这样可以帮助 Vue 在渲染时更加高效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值