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

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

---

目录

---

---

内容

---

1、简介

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

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

2、详解

2.1、table 常用属性

属性名	类型	参数	默认	描述
data	array	-	[]	表格要展示的数据
columns	array	-	[]	表格列配置，对应数据中对象中的key
show-index	boolean	-	true	是否显示索引
index-text	string	-	‘序号’	索引列列名
stripe	boolean	-	false	是否显示斑马纹
border	boolean	-	false	是否显示纵向边框
show-row-hover	boolean	-	true	鼠标悬停时，是否高亮当前行

2.2、columns 配置

属性	类型	默认值	说明
label	string	‘’	列标题名称
prop	string	‘’	对应列内容的属性名 ，与data数组中对象key对应
type	string	‘’	列类型，默认文本，可选’template’（自定义模板）
template	string	‘’	列类型为 ‘template’(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称

3、示例

• 效果图示3-1同1-1

• 源代码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>
  

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

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/leyou_bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/leyou-backend        // 后端项目