1200字范文 > vue-table-with-tree-grid-树形表格组件

vue-table-with-tree-grid-树形表格组件

时间：2019-01-21 09:19:28

文章目录

1、简介2、详解2.1、table 常用属性2.2、columns 配置 3、示例***后记*** ：

内容

1、简介

应用场景：需要展示表格数据，表格数据中有分级或者树形结构的数据。效果图示1-1：

官方地址：/MisterTaki/vue-table-with-tree-grid,有详细使用示例。

2、详解

2.1、table 常用属性

2.2、columns 配置

3、示例

效果图示3-1同1-1

源代码3-1：

<template>...<tree-tableclass="tb-cate"index-text="#"show-indexstripeborder: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>

完整页码代码参考博文‘全栈项目-乐优商场-分类管理-前端-页面渲染’。