1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 怎么使用vue-table-with-tree-grid树形表格组件

怎么使用vue-table-with-tree-grid树形表格组件

时间:2024-06-01 01:11:33

相关推荐

怎么使用vue-table-with-tree-grid树形表格组件

1.安装组件

npm i vue-table-with-tree-grid -S

2.引入组件(在main.js入口文件中引入并注册)

//在入口文件导入树形表格组件import treeTable from 'vue-table-with-tree-grid'

//注册树形表格组件ponent('tree-table', treeTable)

3.使用组件

<!-- 表格区域 --><tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true"></tree-table>

:data绑定数据源

:columns为表格指定列的定义

:selection-type="false"去除复选框

:expand-type="false"去除展开行

:show-index="true"为表格添加索引列

index-text="#"为索引列自定义标题

border是否显示纵向边框(true表示显示,false表示隐藏)

:show-row-hover="false"鼠标悬停是否高亮(true表示高亮,false表示隐藏)

3.2在vue-table-with-tree-grid树形表格组件中如何使用作用域插槽template

在为指定列定义时,定义type为'template',并定义这一列使用的模板名称为‘isok’

//为table指定列的定义columns: [{label: '分类名称',prop: 'cat_name',},{label: '是否有效',//表示将当前列定义为模板列type: 'template',//表示当前这一列使用的模板名称template:'isok'}],};

在表格中,定义模板template,用slot命名为'isok'

<tree-table:data="cateList":columns="columns":selection-type="false":expand-type="false":show-index="true"index-text="#"border><template slot="isok" slot-scope="scope"><i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i><i class="el-icon-error" v-else style="color:red"></i></template></tree-table>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。