refine
This commit is contained in:
Pan
parent
c8709d5109
commit
e894a1c59d
|
|
@ -1,15 +1,13 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
// 扁平化数组
|
||||
export default function treeToTable(
|
||||
data, children = 'children'
|
||||
) {
|
||||
export default function treeToArray(data, children = 'children') {
|
||||
let tmp = []
|
||||
data.forEach((item, idx) => {
|
||||
Vue.set(item, '__index', idx)
|
||||
tmp.push(item)
|
||||
if (item[children] && item[children].length > 0) {
|
||||
const res = treeToTable(item[children], children)
|
||||
const res = treeToArray(item[children], children)
|
||||
tmp = tmp.concat(res)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,50 +1,34 @@
|
|||
<template>
|
||||
<el-table :data="res" :row-style="isShowRow" v-bind="$attrs">
|
||||
<!--通过插槽支持element-ui原生的表格复选框 http://element-cn.eleme.io/#/zh-CN/component/table#duo-xuan -->
|
||||
<slot name="__selection"/>
|
||||
<!--通过插槽支持element-ui原生的表格展开行 http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing -->
|
||||
<slot name="__expand"/>
|
||||
<el-table :data="tableData" :row-style="showRow" v-bind="$attrs">
|
||||
<slot name="selection" />
|
||||
<el-table-column
|
||||
v-for="item in columns"
|
||||
:label="item.label"
|
||||
:key="item.key"
|
||||
:width="item.width"
|
||||
align="center"
|
||||
>
|
||||
:align="item.align||'center'"
|
||||
:header-align="item.headerAlign">
|
||||
<template slot-scope="scope">
|
||||
<slot :scope="scope" :name="item.key">
|
||||
<template v-if="item.key==='__sperad'">
|
||||
<span
|
||||
v-show="isShowSperadIcon(scope.row)"
|
||||
class="tree-ctrl"
|
||||
@click="toggleExpanded(scope.$index)"
|
||||
>
|
||||
<i
|
||||
v-if="!scope.row.__expand"
|
||||
:style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
|
||||
class="el-icon-plus"
|
||||
/>
|
||||
<i
|
||||
v-else
|
||||
:style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
|
||||
class="el-icon-minus"
|
||||
/>
|
||||
<template v-if="item.expand">
|
||||
<span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/>
|
||||
<span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row.__expand" class="el-icon-plus" />
|
||||
<i v-else class="el-icon-minus" />
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="item.key==='__checkbox'">
|
||||
<template v-if="item.checkbox">
|
||||
<el-checkbox
|
||||
v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
|
||||
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
|
||||
:indeterminate="scope.row.__select"
|
||||
v-model="scope.row.__select"
|
||||
@change="handleCheckAllChange(scope.row)"
|
||||
/>
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
<el-checkbox
|
||||
v-else
|
||||
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
|
||||
v-model="scope.row.__select"
|
||||
@change="handleCheckAllChange(scope.row)"
|
||||
/>
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
</template>
|
||||
{{ scope.row[item.key] }}
|
||||
</slot>
|
||||
|
|
@ -60,17 +44,14 @@ export default {
|
|||
name: 'TreeTable',
|
||||
props: {
|
||||
data: {
|
||||
type: [Array, Object],
|
||||
required: true
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/* eslint-disable */
|
||||
renderContent: {
|
||||
type: Function
|
||||
},
|
||||
/* eslint-enable */
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
|
|
@ -91,7 +72,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
res: [],
|
||||
tableData: [],
|
||||
guard: 1
|
||||
}
|
||||
},
|
||||
|
|
@ -104,46 +85,40 @@ export default {
|
|||
data: {
|
||||
// deep watch，监听树表的数据的增删，如果仅仅是展示，可以不用deep watch
|
||||
handler(val) {
|
||||
if (Array.isArray(val) && val.length === 0) {
|
||||
this.res = []
|
||||
if (val.length === 0) {
|
||||
this.tableData = []
|
||||
return
|
||||
}
|
||||
let tmp = ''
|
||||
if (!Array.isArray(val)) {
|
||||
tmp = [val]
|
||||
} else {
|
||||
tmp = val
|
||||
}
|
||||
const func = this.renderContent || treeToArray
|
||||
|
||||
if (this.guard > 0) {
|
||||
addAttrs(tmp, {
|
||||
addAttrs(val, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
this.guard--
|
||||
}
|
||||
|
||||
const retval = func(tmp, this.defaultChildren)
|
||||
this.res = retval
|
||||
const retval = treeToArray(val, this.defaultChildren)
|
||||
this.tableData = retval
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isShowRow: function(row) {
|
||||
const parent = row.row.__parent
|
||||
showRow: function({ row }) {
|
||||
const parent = row.__parent
|
||||
const show = parent ? parent.__expand && parent.__show : true
|
||||
row.row.__show = show
|
||||
row.__show = show
|
||||
return show
|
||||
? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
|
||||
: 'display:none;'
|
||||
},
|
||||
isShowSperadIcon(record) {
|
||||
showSperadIcon(record) {
|
||||
return record[this.children] && record[this.children].length > 0
|
||||
},
|
||||
toggleExpanded(trIndex) {
|
||||
const record = this.res[trIndex]
|
||||
const record = this.tableData[trIndex]
|
||||
const expand = !record.__expand
|
||||
record.__expand = expand
|
||||
},
|
||||
|
|
@ -168,7 +143,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
<style>
|
||||
@keyframes treeTableShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -185,6 +160,9 @@ export default {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
$color-blue: #2196f3;
|
||||
$space-width: 18px;
|
||||
.ms-tree-space {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
border
|
||||
default-children="sub_button"
|
||||
>
|
||||
<template slot="__selection">
|
||||
<template slot="selection">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
</template>
|
||||
<template slot="__expand">
|
||||
|
|
|
|||
|
|
@ -20,19 +20,20 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: 'Checkbox',
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
key: '__sperad'
|
||||
|
||||
key: 'id',
|
||||
expand: true
|
||||
},
|
||||
{
|
||||
label: '事件',
|
||||
label: 'Event',
|
||||
key: 'event',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
label: 'ID',
|
||||
key: 'id'
|
||||
width: 200,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '时间线',
|
||||
|
|
@ -46,67 +47,67 @@ export default {
|
|||
data: [
|
||||
{
|
||||
id: 0,
|
||||
event: '事件1',
|
||||
event: 'Event-0',
|
||||
timeLine: 50,
|
||||
comment: '无'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
event: '事件1',
|
||||
event: 'Event-1',
|
||||
timeLine: 100,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
event: '事件2',
|
||||
event: 'Event-2',
|
||||
timeLine: 10,
|
||||
comment: '无'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
event: '事件3',
|
||||
event: 'Event-3',
|
||||
timeLine: 90,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 4,
|
||||
event: '事件4',
|
||||
event: 'Event-4',
|
||||
timeLine: 5,
|
||||
comment: '无'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
event: '事件5',
|
||||
event: 'Event-5',
|
||||
timeLine: 10,
|
||||
comment: '无'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
event: '事件6',
|
||||
event: 'Event-6',
|
||||
timeLine: 75,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 7,
|
||||
event: '事件7',
|
||||
event: 'Event-7',
|
||||
timeLine: 50,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 71,
|
||||
event: '事件71',
|
||||
event: 'Event-7-1',
|
||||
timeLine: 25,
|
||||
comment: 'xx'
|
||||
},
|
||||
{
|
||||
id: 72,
|
||||
event: '事件72',
|
||||
event: 'Event-7-2',
|
||||
timeLine: 5,
|
||||
comment: 'xx'
|
||||
},
|
||||
{
|
||||
id: 73,
|
||||
event: '事件73',
|
||||
event: 'Event-7-3',
|
||||
timeLine: 20,
|
||||
comment: 'xx'
|
||||
}
|
||||
|
|
@ -114,7 +115,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 8,
|
||||
event: '事件8',
|
||||
event: 'Event-8',
|
||||
timeLine: 25,
|
||||
comment: '无'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue