vue项目中element的表格二次封装(带有树形表格)
2019-05-14 本文已影响0人
蜗牛和曼巴
可以全部复制粘贴，更改文件引入路劲即可
第一步，创建公共组件
<template>
<div class="table">
<el-table
ref="multipleTable"
:data="data"
:border="border"
:foldList="foldList"
:row-style="toggleDisplayTr"
:height="tableHeight"
style="width: 100%;"
:header-cell-style="headercellstyle"
class-name="small-padding fixed-width"
highlight-current-row
_highlight:
true
@selection-change="handleSelectionChange"
@row-click="handlRowclick"
>
<template v-for="colConfig in colConfigs">
<slot v-if="colConfig.slot" :name="colConfig.slot"/>
<!-- 插入编辑删除等 -->
<el-table-column :key="colConfig[0]" show-overflow-tooltip v-bind="colConfig"/>
</template>
</el-table>
</div>
</template>
<script>
export default {
props: {
// 表头
colConfigs: {
type: Array,
default: () => []
},
// 表格数据
data: {
type: Array,
default: () => []
},
// 表格边宽
border: {
type: Boolean,
default: false
},
// 表格自适应高度,在需要的地方通过tableHeight: window.innerHeight * 0.65,控制*后的数字自适应，如果不需要这个功能，则写tableHeight:null,不可写空字符串
tableHeight: {
type: Number,
default: 0
},
// 表头的样式
headercellstyle: {
type: Object,
default: () => {}
},
// 树形表格折叠数组
foldList: {
type: Array,
default: () => []
},
// 树形表格方法
toggleDisplayTr: {
type: Function,
default: () => {}
}
},
data() {
return {};
},
methods: {
// 当选择项发生变化时会触发该事件
handleSelectionChange(val) {
this.$emit("handleSelectionChange", val);
},
// 点击某一行触发
handlRowclick(row, event, column) {
this.$emit("handlRowclick", row, event, column);
}
}
};
</script>
第二步（没有树形表格的引入方法，在需要的地方）
<tables
:data="data"
:col-configs="colConfigs"
:border="border"
:table-height="tableHeight"
@handleSelectionChange="handleSelectionChange"
>
第三步（没有树形表格的引入方法，在需要的地方）
data() {
this.colConfigs = [
{ prop: "date", label: "日期" },
{ prop: "name", label: "姓名" },
{ prop: "address", label: "地址" },
{ prop: "address", label: "地址" },
{ prop: "address", label: "地址" },
{ prop: "address", label: "地址" },
// { prop: "address", label: "地址" },
// 模版中的元素需要对应的有 slot="opt" 属性
{ slot: "opt" }
];
return {
tableHeight: window.innerHeight * 0.65, // 计算表格的高度，超出高度显示纵向滚动条，只可以在固定的高度滚动(控制*后面的数据自适应)
// 表格内容
data: [
{
num: 17,
date: "2016-05-02",
name: "王小虎1",
title: "上海市普陀区金沙江路 1518 弄",
author: "李四1",
number: 1321,
readnumber: 4321432,
status: "成功"
}
],
}
树形表格的引入方法（1）,在需要的地方
<!-- 树形表格 -->
<tree-table
:data="data"
:foldList="foldList"
:tableHeight="tableHeight"
:colConfigs="colConfigs"
:headercellstyle="headercellstyle"
:toggleDisplayTr="toggleDisplayTr"
@handlRowclick="handlRowclick"
>
<el-table-column slot="selection" align="center" width="55" type="index"></el-table-column>
<el-table-column slot="opt" label="名称" min-width="200" show-overflow-tooltip align="left">
<template slot-scope="scope">
<p :style="`margin-left: ${scope.row.__level * 20}px;margin-top:0;margin-bottom:0`">
<i
@click="toggleFoldingStatus(scope.row)"
class="el-icon-remove-outline"
:class="toggleFoldingClass(scope.row)"
></i>
{{scope.row.Name}}
</p>
</template>
</el-table-column>
</tree-table>
树形表格的引入方法（2），
data() {
// 表头标题配置
this.colConfigs = [
{ slot: "selection" },
{ slot: "opt" },
{ prop: "connect", align: "center", label: "连接" },
{ prop: "Order", align: "left", label: "目标" },
{
prop: "__identity",
label: "菜单",
align: "left"
},
{ prop: "__identity", align: "left", label: "展开" },
{ prop: "__identity", align: "left", label: "公共" },
{ prop: "__identity", align: "left", label: "有效" },
{ prop: "__identity", align: "left", label: "介绍" }
// { prop: 'address', label: '地址' },
// 模版中的元素需要对应的有 slot='opt' 属性
];
return:{
foldList: [], // 该数组中的值 都会在列表中进行隐藏 死亡名单
// 表头样式
headercellstyle: {
background: "rgb(245, 247, 250)"
},
}
第三步，methods
methods:{
/*********************************
** Fn: toggleFoldingStatus
** Intro: 切换展开 还是折叠
** @params: params 当前点击行的数据
** Author: zyx
*********************************/
toggleFoldingStatus(params) {
this.foldList.includes(params.__identity)
? this.foldList.splice(this.foldList.indexOf(params.__identity), 1)
: this.foldList.push(params.__identity);
},
/*********************************
** Fn: toggleDisplayTr
** Intro: 该方法会对每一行数据都做判断 如果foldList 列表中的元素 也存在与当前行的 __family列表中 则该行不展示
** @params:
** Author: zyx
*********************************/
toggleDisplayTr({ row, index }) {
// console.log(row.Id);
for (let i = 0; i < this.foldList.length; i++) {
let item = this.foldList[i];
// 如果foldList中元素存在于 row.__family中，则该行隐藏。 如果该行的自身标识等于隐藏元素，则代表该元素就是折叠点
if (row.__family.includes(item) && row.__identity !== item)
return "display:none;";
}
return "";
},
/*********************************
** Fn: toggleFoldingClass
** Intro: 如果子集长度为0，则不返回字体图标。
** Intro: 如果子集长度为不为0，根据foldList是否存在当前节点的标识返回相应的折叠或展开图标
** Intro: 关于class说明：permission_placeholder返回一个占位符，具体查看class
** @params: params 当前行的数据对象
** Author: zyx
*********************************/
toggleFoldingClass(params) {
return params.Children.length === 0
? "permission_placeholder"
: this.foldList.indexOf(params.__identity) === -1
? "el-icon-remove-outline"
: "el-icon-circle-plus-outline";
},
/*********************************
** Fn: formatConversion
** Intro: 将树形接口数据扁平化
** @params: parent 为当前累计的数组 也是最后返回的数组
** @params: children 为当前节点仍需继续扁平子节点的数据
** @params: index 默认等于0， 用于在递归中进行累计叠加 用于层级标识
** @params: family 装有当前包含元素自身的所有父级 身份标识
** @params: elderIdentity 父级的 唯一身份标识
** Author: zyx
*********************************/
formatConversion(
parent,
children,
index = 0,
family = [],
elderIdentity = "x"
) {
// children如果长度等于0，则代表已经到了最低层
// let page = (this.startPage - 1) * 10
if (children.length > 0) {
children.map((x, i) => {
// 设置 __level 标志位 用于展示区分层级
Vue.set(x, "__level", index);
// 设置 __family 为家族关系 为所有父级，包含本身在内
Vue.set(x, "__family", [...family, elderIdentity + "_" + i]);
// 本身的唯一标识 可以理解为个人的身份证咯 一定唯一。
Vue.set(x, "__identity", elderIdentity + "_" + i);
parent.push(x);
// 如果仍有子集，则进行递归
if (x.Children.length > 0)
this.formatConversion(
parent,
x.Children,
index + 1,
[...family, elderIdentity + "_" + i],
elderIdentity + "_" + i
);
});
}
return parent;
},
}
第四步，假数据
import tableListData from "./components/data.js"; //表格假数据
import Vue from "vue";
data.js文件//
let tableListData = [{
"Id": 19,
"Name": "运营系统",
"connect": null,
"Order": 1,
"Children": [{
"Id": 1025,
"Name": "企业查询",
"connect": "zhongshun",
"Order": 1,
"Children": [{
"Id": 1051,
"Name": "企业列表",
"connect": "zhongshun",
"Order": 1,
"Children": []
},
{
"Id": 1029,
"Name": "企业明细",
"connect": "zhongshun",
"Order": 2,
"Children": []
},
{
"Id": 1030,
"Name": "投标战绩",
"connect": "zhongshun",
"Order": 3,
"Children": []
}
]
},
{
"Id": 1026,
"Name": "业绩查询",
"connect": null,
"Order": 2,
"Children": [{
"Id": 1031,
"Name": "业绩列表",
"connect": "zhongshun",
"Order": 1,
"Children": []
},
{
"Id": 1032,
"Name": "业绩明细",
"connect": "zhongshun",
"Order": 2,
"Children": []
}
]
}
]
}]
export default tableListData
第五步，created
created() {
// 测试数据 data
this.data = this.formatConversion([], tableListData);
// console.log(this.data);
},
