vue-table-with-tree-grid-树形表格组件
1、简介
官方地址：,有详细使用示例。
2、详解
2.1、table 常用属性
2.2、columns 配置
3、示例
-
源代码3-1： <template> ... <tree-table class="tb-cate" index-text="#" show-index stripe border :data="cateList" :columns="columns" :expand-type="false" :selection-type="false" > <template slot="isok" slot-scope="scope"> <i class="el-icon-success" v-if="scope.row.effective" style="color: lightGreen"></i> <i class="el-icon-error" v-else style="color: red"></i> </template> <template slot="level" scope="scope"> <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.level === 1">一级</el-tag> <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.level === 2">二级</el-tag> <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag> </template> <template slot="opt" scope="scope"> <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button> <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button> </template> </tree-table> ... </template> <script> ... export default { data() { return { cateList: [], columns: [ { label: "分类名称", prop: "name" }, { label: "是否有效", prop: "effective", type: "template", template: "isok", }, { label: "分类等级", prop: "level", type: "template", template: "level" }, { label: 操作, type: template, template: opt } ], props: { expandType: false, selectionType: false, }, ... methods: { getCateList() { this.$http.get("/category/page", { params: this.query }).then((resp) => { this.total = resp.total; this.cateList = resp.items; console.log(resp); }); }, </script>
完整页码代码参考博文‘全栈项目-乐优商场-分类管理-前端-页面渲染’。
后记 ：
前端项目源代码地址：https://gitee.com/gaogzhen/leyou_bms // 前端后台管理系统 后端JAVA源代码地址:https://gitee.com/gaogzhen/leyou-backend // 后端项目
