最近在项目开发中需要做一个多级表格,树形表格的功能,看看element-ui上没有,自己开是折腾,话不多说,上思路和代码。
效果图:
可点击收缩,展开。
一,首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval。js
先看看指数。vue,原理就是在element-ui的基础上做了进一步改造。
//利用element-ui的& lt;模板slot-scope=胺段А弊４鞘粜?在插入多级表格
& lt; template>
& lt; el-table:数据=" https://www.yisu.com/zixun/formatData ":行- v-bind=" $ attrs "比;
& lt; el-table-column v="列。长度===0”宽度=" 150 "比;
& lt;模板slot-scope=胺段А北?
在scope.row & lt;跨度v="空间。_level”class=" ms-tree-space”:关键="空间”祝辞& lt;/span>
& lt;跨类=" tree-ctrl " v=癷conShow (0, scope.row)”@click=" toggleExpanded(范围。美元指数)”在
& lt;我v=" ! scope.row。_expanded el-icon-plus“类=祝辞& lt;/i>
& lt;我v-else类=" el-icon-minus "祝辞& lt;/i>
& lt;/span>
{{范围。美元指数}}
& lt;/template>
& lt;/el-table-column>
& lt; el-table-column v-else v=傲?列、索引)”:关键="列。价值”:label="列。在文本”:宽度=" column.width”;
& lt;模板slot-scope=胺段А北?
& lt;跨度v=v=爸甘?==0 scope.row空间。_level”class=" ms-tree-space”:关键="空间”祝辞& lt;/span>
& lt;跨类=" tree-ctrl " v=癷conShow(指数、scope.row)”@click=" toggleExpanded(范围。美元指数)”在
& lt;我v=" ! scope.row。_expanded el-icon-plus“类=祝辞& lt;/i>
& lt;我v-else类=" el-icon-minus "祝辞& lt;/i>
& lt;/span>
{{scope.row [column.value]}}
& lt;/template>
& lt;/el-table-column>
& lt; slot> & lt;/slot>
& lt;/el-table>
& lt;/template>
& lt; script>
从“进口treeToArray。/eval '
出口默认{
名称:“treeTable”,
道具:{
数据:{
类型:数组、对象,
要求:真正的
}，
列:{
类型:数组,
默认值:()=比;[]
}，
evalFunc:函数,
evalArgs:数组,
expandAll: {
类型:布尔,
默认值:假
}
}，
计算:{//格式化数据源
formatData:函数(){
让tmp
如果(! Array.isArray (this.data)) {
tmp=[this.data]
其他}{
tmp=this.data
}
常量函数=valFunc | | treeToArray
常量参数=valArgs & # 63;数组中。concat ([tmp,这。expandAll], this.evalArgs): [tmp, this.expandAll]
函数返回。应用(null, args)
}
}，
方法:{
showRow:函数(行){
const=(row.row。父母& # 63;(row.row.parent。_expanded,,row.row.parent._show):真正的)
row.row。_show=显示
返回显示& # 63;动画:treeTableShow 1年代;-webkit-animation: treeTableShow 1 s,“:”显示:没有;
}，//切换下级是否展开
toggleExpanded:函数(trIndex) {
const记录=this.formatData [trIndex]
记录。_expanded=! record._expanded
}，//图标显示
iconShow(指数、记录){
返回(指数===0,,记录。孩子,,record.children。长度比;0)
}
}
}
& lt;/script>
css样式表& lt;风格rel="/"比;
@keyframes treeTableShow {
从{不透明度:0;}
{不透明度:1;}
}
@-webkit-keyframes treeTableShow {
从{不透明度:0;}
{不透明度:1;}
}
& lt;/style>
& lt;风格lang=" scss " rel="样式表/scss " scoped>
美元蓝色:# 2196 f3;
美元的齿槽宽度:18 px;
.ms-tree-space {
位置:相对;
上图:1 px;
显示:inline-block;
字体样式:正常;
粗细:400;
行高:1;
宽度:$齿间距;
高度:14 px;
之前,::{
内容:“
}
}
.processContainer {
宽度:100%;
高度:100%;
}
表td {
行高:26 px;
}
.tree-ctrl {
位置:相对;
光标:指针;
颜色:蓝色;
margin-left: - $齿间距;
}
& lt;/style>
之前
eval。js
/* *
* @Author: hyf
* @Date: 2018-10-27
*/使用严格的
从“Vue”进口Vue
出口默认函数treeToArray(数据、expandAll父母=null,水平=null) {
让tmp=[]
Array.from(数据).forEach(函数(记录){
如果(记录。_expanded===未定义){
Vue。集(记录、“_expanded”expandAll)
}
让_level=1
如果(水平!==未定义的,,水平!==null) {
_level=+ 1水平
}
Vue。集(记录、“_level”_level)//如果有父元素
如果(父){
Vue。集(记录,‘父’,父)
}
tmp.push(记录)
如果(记录。孩子,,record.children。长度比;0){
const孩子=treeToArray(记录。孩子,expandAll记录,_level)
tmp=tmp.concat(儿童)
}
}）
返回tmp
}
