修复bug
This commit is contained in:
lei.jiang
parent
021bc3e266
commit
ab72ffa940
|
|
@ -1,12 +1,23 @@
|
|||
<template>
|
||||
<el-table :data="formatData"
|
||||
:row-style="showRow">
|
||||
<el-table-column v-for="(column, index) in columns" :key="column.value"
|
||||
<el-table :data="formatData" :row-style="showRow">
|
||||
<el-table-column v-if="columns.length===0" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span v-for="space in scope.row._level"
|
||||
class="ms-tree-space"></span>
|
||||
<span class="tree-ctrl" v-if="iconShow(0,scope.row)"
|
||||
@click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
|
||||
<i v-else class="el-icon-minus"></i>
|
||||
</span>
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-else v-for="(column, index) in columns" :key="column.value"
|
||||
:label="column.text" :width="column.width">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="index === 0" v-for="space in scope.row._level"
|
||||
class="ms-tree-space"></span>
|
||||
<span class="tree-ctrl" v-if="toggleIconShow(index,scope.row)"
|
||||
<span class="tree-ctrl" v-if="iconShow(index,scope.row)"
|
||||
@click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
|
||||
<i v-else class="el-icon-minus"></i>
|
||||
|
|
@ -14,66 +25,65 @@
|
|||
{{scope.row[column.value]}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="extend"></slot>
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 传进来的数据格式
|
||||
* columns：{
|
||||
* [value:'',text:'']
|
||||
* }
|
||||
/**
|
||||
Auth: Lei.j1ang
|
||||
Created: 2018/1/19-13:59
|
||||
*/
|
||||
import treeToArray from './eval'
|
||||
import treeToArray from './eval'
|
||||
export default {
|
||||
name: 'tree-table',
|
||||
props: {
|
||||
data: {
|
||||
type: [Array, Object],
|
||||
required: true
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
evalFunc: Function,
|
||||
evalArgs: Array,
|
||||
expandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
name: 'treeTable',
|
||||
props: {
|
||||
a: 1,
|
||||
data: {
|
||||
type: [Array, Object],
|
||||
required: true
|
||||
},
|
||||
computed: {
|
||||
// 格式化数据源
|
||||
formatData: function() {
|
||||
if (!Array.isArray(this.data)) {
|
||||
this.data = [this.data]
|
||||
}
|
||||
const func = this.evalFunc || treeToArray
|
||||
const args = this.evalArgs ? Array.concat([this.data], this.evalArgs) : [this.data, this.expandAll]
|
||||
return func.apply(null, args)
|
||||
}
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
methods: {
|
||||
showRow: function(row) {
|
||||
const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
|
||||
row.row._show = show
|
||||
return show ? '' : 'display:none;'
|
||||
},
|
||||
// 切换下级是否展开
|
||||
toggleExpanded: function(trIndex) {
|
||||
const record = this.formatData[trIndex]
|
||||
record._expanded = !record._expanded
|
||||
},
|
||||
// 图标显示
|
||||
toggleIconShow(index, record) {
|
||||
return (index === 0 && record.children && record.children.length > 0)
|
||||
}
|
||||
evalFunc: Function,
|
||||
evalArgs: Array,
|
||||
expandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 格式化数据源
|
||||
formatData: function() {
|
||||
let tmp
|
||||
if (!Array.isArray(this.data)) {
|
||||
tmp = [this.data]
|
||||
} else {
|
||||
tmp = this.data
|
||||
}
|
||||
const func = this.evalFunc || treeToArray
|
||||
const args = this.evalArgs ? Array.concat([tmp], this.evalArgs) : [tmp, this.expandAll]
|
||||
return func.apply(null, args)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showRow: function(row) {
|
||||
const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
|
||||
row.row._show = show
|
||||
return show ? '' : 'display:none;'
|
||||
},
|
||||
// 切换下级是否展开
|
||||
toggleExpanded: function(trIndex) {
|
||||
const record = this.formatData[trIndex]
|
||||
record._expanded = !record._expanded
|
||||
},
|
||||
// 图标显示
|
||||
iconShow(index, record) {
|
||||
return (index === 0 && record.children && record.children.length > 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
## 写在前面
|
||||
此组件仅提供一个创建TreeTable的解决方案
|
||||
##prop说明
|
||||
###data
|
||||
必输
|
||||
|
|
@ -28,14 +30,14 @@
|
|||
}]
|
||||
}
|
||||
```
|
||||
###columns
|
||||
必输
|
||||
|
||||
###columns
|
||||
列属性,要求是一个数组
|
||||
|
||||
1. text: 显示在表头
|
||||
2. value: 对应data的key，treeTable将显示相应的value
|
||||
3. width: 每列的宽度，为一个数字
|
||||
如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
|
||||
```javascript
|
||||
[{
|
||||
value:string,
|
||||
|
|
@ -47,8 +49,10 @@
|
|||
width:number
|
||||
}]
|
||||
```
|
||||
|
||||
### expandAll
|
||||
是否默认全部展开，boolean值，默认为false
|
||||
|
||||
### evalFunc
|
||||
解析函数，function，非必须
|
||||
|
||||
|
|
@ -63,4 +67,7 @@
|
|||
|
||||
如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
|
||||
## slot
|
||||
请参考`customTreeTable`
|
||||
请参考`customTreeTable`
|
||||
|
||||
## 其他
|
||||
如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
|
||||
|
|
@ -4,14 +4,10 @@
|
|||
*/
|
||||
'use strict'
|
||||
import Vue from 'vue'
|
||||
const marLTemp = {}
|
||||
const marLTemp = []
|
||||
export default function treeToArray(data, parent, level, expandedAll, item) {
|
||||
let tmp = []
|
||||
let rootId
|
||||
Array.from(data).forEach(function(record) {
|
||||
if (record.children) {
|
||||
rootId = record.id
|
||||
}
|
||||
if (record._expanded === undefined) {
|
||||
Vue.set(record, '_expanded', expandedAll)
|
||||
}
|
||||
|
|
@ -25,16 +21,13 @@ export default function treeToArray(data, parent, level, expandedAll, item) {
|
|||
Vue.set(record, 'parent', parent)
|
||||
// 如果父元素有偏移量，需要计算在this的偏移量中
|
||||
// 偏移量还与前面同级元素有关，需要加上前面所有元素的长度和
|
||||
if (!marLTemp[rootId]) {
|
||||
marLTemp[rootId] = []
|
||||
if (!marLTemp[_level]) {
|
||||
marLTemp[_level] = 0
|
||||
}
|
||||
if (!marLTemp[rootId][_level]) {
|
||||
marLTemp[rootId][_level] = 0
|
||||
}
|
||||
Vue.set(record, '_marginLeft', marLTemp[rootId][_level] + parent._marginLeft)
|
||||
Vue.set(record, '_marginLeft', marLTemp[_level] + parent._marginLeft)
|
||||
Vue.set(record, '_width', record[item] / parent[item] * parent._width)
|
||||
// 在本次计算过偏移量后加上自己长度，以供下一个元素使用
|
||||
marLTemp[rootId][_level] += record._width
|
||||
marLTemp[_level] += record._width
|
||||
} else {
|
||||
// 如果为根
|
||||
// 初始化偏移量存储map
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<tree-table :data="data" :columns="columns" :evalFunc="func" :evalArgs="args">
|
||||
<template slot="extend">
|
||||
<el-table-column label="时间线" width="500" >
|
||||
<tree-table :data="data" :evalFunc="func" :evalArgs="args">
|
||||
<el-table-column label="时间线">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
|
||||
<div class="processContainer">
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
<el-button type="text" @click="message(scope.row)">点击</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</tree-table>
|
||||
</template>
|
||||
|
||||
|
|
@ -54,13 +52,7 @@ export default {
|
|||
value: 'comment'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 0,
|
||||
event: '事件0',
|
||||
timeLine: 50,
|
||||
comment: '无'
|
||||
},
|
||||
data:
|
||||
{
|
||||
id: 1,
|
||||
event: '事件1',
|
||||
|
|
@ -134,8 +126,7 @@ export default {
|
|||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
args: [null, null, true, 'timeLine']
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue