Vue项目中使用树形控件 vue-table-width-tree-grid
需要实现的整体效果如下:
这个树形结构组件ElementUI是没有提供的,我们需要依赖第三方插件来完成。
一、安装tree-table组件
(1)Vue 可视化工程vue UI来安装:
我们打开VUE的可视化面板(在cmd控制台输入“vue ui”指令,如何安装之前在环境搭建时讲解过),找到“依赖”模块,点击右上角“安装依赖”:
在对话框中,在“运行依赖”下搜索“vue-table-with”插件
安装完毕后会在依赖列表看到此插件:
(2)第二张安装方法是:直接用node的npm install的方法来下载安装:
npm i vue-table-with-tree-grid -S
main.js中注册
import TreeTable from 'vue-table-with-tree-grid' //表格 树形组件
Vue.component('tree-table',TreeTable); //自定义注册tree-table 标签组件
二、使用tree-table组件
组件注册完毕后,我们在Cate.vue中使用该组件,在原来留好的“表格区域”放置该组件标签“<tree-table>”
tree-table的使用我们可以查看官方文档(https://github.com/MisterTaki/vue-table-with-tree-grid),主页有介绍和API表格,master分支下有一个demo可以供我们学习:
首先我们需要通过“:data”来绑定需要展示的数据对象;“columns”是绑定的表格各列的配置对象,可以配置各列的名称、属性名、对齐方式和宽度等:
官方的columns写法如下:
columns: [
{
label: 'name',
prop: 'name',
width: '400px',
},
{
label: 'sex',
prop: 'sex',
minWidth: '50px',
},
{
label: 'score',
prop: 'score',
},
{
label: 'likes',
prop: 'likes',
minWidth: '200px',
type: 'template',
template: 'likes',
},
]
三、实现商品分类基本树形效果
我们在Cate组件中编辑tree-table,添加data和columns绑定,其中的catelist是上一篇我们访问后拿到的商品分类对象数组,columns对象就是列定义对象:
<!-- 表格区域 --><!-- 树形组件 -->
<tree-table :data="catelist" :columns="columns">
</tree-table>
我们在数据区定义columns对象:
columns: [
{
label: '分类名称',
prop: 'cat_name'
}
]
这个时候我们就实现了最基本的分类指标树形展示了,查看页面
去除前面的复选框,在标签中添加“selection-type="false"”就可以了;去除展开行使用“expand-type="false"”,然后再使用“show-index="true"”添加默认行号,使用“:border="true"”添加一个列与列之前的分隔线。
<tree-table :data="catelist" :columns="columns"
:selection-type="false" :expand-type="false" :show-index="true" :border="true">
</tree-table>
效果图:
标签:控件,vue,tree,树形,组件,table,columns From: https://www.cnblogs.com/mahmud/p/16894146.html