如何使用vue-table-with-tree-grid的树形表格组件

平时我们用element-ui组件库的时候,用的很多组件都可以解决日常工作中的需要,最近遇到了一个需要搭建一个树形结构的表格,但element组件没有提供,这时就需要自己去通过第三方组件来实现这个功能了。在这里插入图片描述
那么如何才能实现这样的结构方式呢?就需要通过vue-table-with-tree-grid这个组件了
一、在vue脚手架的依赖项的开发依赖,搜索并安装vue-table-with-tree-grid这个
二、在你的项目的main.js文件中引入,如图:
在这里插入图片描述
三、这时就可以使用这个treetable标签来搭建表格了,也可以打开github上相应的文档进行查看属性,但github国内限速的原因,打开速度太慢,我就在这里列出几个常用的属性来供参考在这里插入图片描述
图上共有七个属性,分别是绑定数据源、columns定义竖行的内容,它是一个数组,数组中的每个对象就代表一个竖行所要展示的内容,下面会说到它的一些参数、selection-type是否为多选类型的表格,默认值是true,如果不想要多选的框可以设置为false、expand-type展开行效果、show-index显示数据的索引值、index-text自定义索引名称,默认的是‘序号’两个字、border表格竖行分割线。
四、columns竖行内容

每一个数组都是一竖列的内容,label竖列标题、prop所绑定的属性、type将这一竖列自定义为模板列、template模板列的名称
这两个数组就代表前两竖列的内容
五、如果需要自定义模板插槽,就需要在columns定义一个如同第二个数组这样的数据,并通过在标签中用作用域插槽来实现
后面几竖列都是通过插入模板来实现的,和上面实现两个图标的步骤是一样的,就不再一一列举了

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值