文章の目录
一、项目地址二、使用步骤1、安装依赖包2、基本使用3、实现分类树形列表 4、API写在最后一、项目地址
地址
这个第三方库只适用于Vue2.0，且已经长时间没更新维护了，请大家在实际项目中谨慎使用。
二、使用步骤
1、安装依赖包
Use npm:
npm i vue-table-with-tree-grid -S
Or use yarn:
yarn add vue-table-with-tree-grid
2、基本使用
import Vue from "vue";import TreeTable from "vue-table-with-tree-grid";Vue.use(TreeTable);
Or
import Vue from "vue";import TreeTable from "vue-table-with-tree-grid";ponent("tree-table", TreeTable);
3、实现分类树形列表
实现属性列表布局并进行数据填充自定义表格列<!-- 表格 --><tree-table:data="categoryList":columns="columns":selection-type="false":expand-type="false":show-index="true"index-text="#"border:show-row-hover="false"class="tree-table"><!-- 是否有效 --><template slot="catDeleted" 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><!-- 排序 --><template slot="catLevel" slot-scope="scope"><el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag><el-tag type="success" v-else-if="scope.row.cat_level === 1" size="mini">二级</el-tag><el-tag type="warning" v-else size="mini">三级</el-tag></template><!-- 操作 --><template slot="action" slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="updateCategory(scope.row.cat_id)">编辑</el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCategory(scope.row.cat_id)">删除</el-button></template></tree-table>...// 为table指定列的定义columns: [{label: "分类名称",prop: "cat_name"},{label: "是否有效",key: "cat_deleted",// 表示，将当前列定义为模板列type: "template",// 表示当前这一列使用的模板名称template: "catDeleted"},{label: "排序",key: "cat_level",// 表示，将当前列定义为模板列type: "template",// 表示当前这一列使用的模板名称template: "catLevel"},{title: "操作",// 表示，将当前列定义为模板列type: "template",// 表示当前这一列使用的模板名称template: "action"}],
4、API
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???如果你觉得该文章有一点点用处，可以给作者点个赞；
\\*^o^*//如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；
~~~///(^v^)\\\~~~谢谢各位读者们啦
(^_^)∠※！！！
