zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refine

This commit is contained in:
Pan 2019-03-04 18:13:03 +08:00
parent c8709d5109
commit e894a1c59d
4 changed files with 55 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/TreeTable/eval.js
View File

@ -1,15 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
// 扁平化数组 // 扁平化数组
export default function treeToTable( export default function treeToArray(data, children = 'children') {
data, children = 'children'
) {
let tmp = [] let tmp = []
data.forEach((item, idx) => { data.forEach((item, idx) => {
Vue.set(item, '__index', idx) Vue.set(item, '__index', idx)
tmp.push(item) tmp.push(item)
if (item[children] && item[children].length > 0) { if (item[children] && item[children].length > 0) {
const res = treeToTable(item[children], children) const res = treeToArray(item[children], children)
tmp = tmp.concat(res) tmp = tmp.concat(res)
} }
}) })

84
src/components/TreeTable/index.vue
View File

@ -1,50 +1,34 @@
<template> <template>
<el-table :data="res" :row-style="isShowRow" v-bind="$attrs"> <el-table :data="tableData" :row-style="showRow" v-bind="$attrs">
<!--通过插槽支持element-ui原生的表格复选框 http://element-cn.eleme.io/#/zh-CN/component/table#duo-xuan --> <slot name="selection" />
<slot name="__selection"/>
<!--通过插槽支持element-ui原生的表格展开行 http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing -->
<slot name="__expand"/>
<el-table-column <el-table-column
v-for="item in columns" v-for="item in columns"
:label="item.label" :label="item.label"
:key="item.key" :key="item.key"
:width="item.width" :width="item.width"
align="center" :align="item.align||'center'"
> :header-align="item.headerAlign">
<template slot-scope="scope"> <template slot-scope="scope">
<slot :scope="scope" :name="item.key"> <slot :scope="scope" :name="item.key">
<template v-if="item.key==='__sperad'"> <template v-if="item.expand">
<span <span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/>
v-show="isShowSperadIcon(scope.row)" <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
class="tree-ctrl" <i v-if="!scope.row.__expand" class="el-icon-plus" />
@click="toggleExpanded(scope.$index)" <i v-else class="el-icon-minus" />
>
<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"
/>
</span> </span>
</template> </template>
<template v-if="item.key==='__checkbox'"> <template v-if="item.checkbox">
<el-checkbox <el-checkbox
v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0" v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} " :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
:indeterminate="scope.row.__select" :indeterminate="scope.row.__select"
v-model="scope.row.__select" v-model="scope.row.__select"
@change="handleCheckAllChange(scope.row)" @change="handleCheckAllChange(scope.row)" />
/>
<el-checkbox <el-checkbox
v-else v-else
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} " :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
v-model="scope.row.__select" v-model="scope.row.__select"
@change="handleCheckAllChange(scope.row)" @change="handleCheckAllChange(scope.row)" />
/>
</template> </template>
{{ scope.row[item.key] }} {{ scope.row[item.key] }}
</slot> </slot>
@ -60,17 +44,14 @@ export default {
name: 'TreeTable', name: 'TreeTable',
props: { props: {
data: { data: {
type: [Array, Object], type: Array,
required: true required: true,
default: () => []
}, },
columns: { columns: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
/* eslint-disable */
renderContent: {
type: Function
},
/* eslint-enable */ /* eslint-enable */
defaultExpandAll: { defaultExpandAll: {
type: Boolean, type: Boolean,
@ -91,7 +72,7 @@ export default {
}, },
data() { data() {
return { return {
res: [], tableData: [],
guard: 1 guard: 1
} }
}, },
@ -104,46 +85,40 @@ export default {
data: { data: {
// deep watch，监听树表的数据的增删，如果仅仅是展示，可以不用deep watch // deep watch，监听树表的数据的增删，如果仅仅是展示，可以不用deep watch
handler(val) { handler(val) {
if (Array.isArray(val) && val.length === 0) { if (val.length === 0) {
this.res = [] this.tableData = []
return return
} }
let tmp = ''
if (!Array.isArray(val)) {
tmp = [val]
} else {
tmp = val
}
const func = this.renderContent || treeToArray
if (this.guard > 0) { if (this.guard > 0) {
addAttrs(tmp, { addAttrs(val, {
expand: this.defaultExpandAll, expand: this.defaultExpandAll,
children: this.defaultChildren children: this.defaultChildren
}) })
this.guard-- this.guard--
} }
const retval = func(tmp, this.defaultChildren) const retval = treeToArray(val, this.defaultChildren)
this.res = retval this.tableData = retval
}, },
deep: true, deep: true,
immediate: true immediate: true
} }
}, },
methods: { methods: {
isShowRow: function(row) { showRow: function({ row }) {
const parent = row.row.__parent const parent = row.__parent
const show = parent ? parent.__expand && parent.__show : true const show = parent ? parent.__expand && parent.__show : true
row.row.__show = show row.__show = show
return show return show
? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
: 'display:none;' : 'display:none;'
}, },
isShowSperadIcon(record) { showSperadIcon(record) {
return record[this.children] && record[this.children].length > 0 return record[this.children] && record[this.children].length > 0
}, },
toggleExpanded(trIndex) { toggleExpanded(trIndex) {
const record = this.res[trIndex] const record = this.tableData[trIndex]
const expand = !record.__expand const expand = !record.__expand
record.__expand = expand record.__expand = expand
}, },
@ -168,7 +143,7 @@ export default {
} }
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped> <style>
@keyframes treeTableShow { @keyframes treeTableShow {
from { from {
opacity: 0; opacity: 0;
@ -185,6 +160,9 @@ export default {
opacity: 1; opacity: 1;
} }
} }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
$color-blue: #2196f3; $color-blue: #2196f3;
$space-width: 18px; $space-width: 18px;
.ms-tree-space { .ms-tree-space {

2
src/views/table/treeTable/customTreeTable.vue
View File

@ -14,7 +14,7 @@
border border
default-children="sub_button" default-children="sub_button"
> >
<template slot="__selection"> <template slot="selection">
<el-table-column type="selection" width="55"/> <el-table-column type="selection" width="55"/>
</template> </template>
<template slot="__expand"> <template slot="__expand">

41
src/views/table/treeTable/treeTable.vue
View File

@ -20,19 +20,20 @@ export default {
data() { data() {
return { return {
columns: [ columns: [
{
label: 'Checkbox',
checkbox: true
},
{ {
label: '', label: '',
key: '__sperad' key: 'id',
expand: true
}, },
{ {
label: '事件', label: 'Event',
key: 'event', key: 'event',
width: 200 width: 200,
}, align: 'left'
{
label: 'ID',
key: 'id'
}, },
{ {
label: '时间线', label: '时间线',
@ -46,67 +47,67 @@ export default {
data: [ data: [
{ {
id: 0, id: 0,
event: '事件1', event: 'Event-0',
timeLine: 50, timeLine: 50,
comment: '无' comment: '无'
}, },
{ {
id: 1, id: 1,
event: '事件1', event: 'Event-1',
timeLine: 100, timeLine: 100,
comment: '无', comment: '无',
children: [ children: [
{ {
id: 2, id: 2,
event: '事件2', event: 'Event-2',
timeLine: 10, timeLine: 10,
comment: '无' comment: '无'
}, },
{ {
id: 3, id: 3,
event: '事件3', event: 'Event-3',
timeLine: 90, timeLine: 90,
comment: '无', comment: '无',
children: [ children: [
{ {
id: 4, id: 4,
event: '事件4', event: 'Event-4',
timeLine: 5, timeLine: 5,
comment: '无' comment: '无'
}, },
{ {
id: 5, id: 5,
event: '事件5', event: 'Event-5',
timeLine: 10, timeLine: 10,
comment: '无' comment: '无'
}, },
{ {
id: 6, id: 6,
event: '事件6', event: 'Event-6',
timeLine: 75, timeLine: 75,
comment: '无', comment: '无',
children: [ children: [
{ {
id: 7, id: 7,
event: '事件7', event: 'Event-7',
timeLine: 50, timeLine: 50,
comment: '无', comment: '无',
children: [ children: [
{ {
id: 71, id: 71,
event: '事件71', event: 'Event-7-1',
timeLine: 25, timeLine: 25,
comment: 'xx' comment: 'xx'
}, },
{ {
id: 72, id: 72,
event: '事件72', event: 'Event-7-2',
timeLine: 5, timeLine: 5,
comment: 'xx' comment: 'xx'
}, },
{ {
id: 73, id: 73,
event: '事件73', event: 'Event-7-3',
timeLine: 20, timeLine: 20,
comment: 'xx' comment: 'xx'
} }
@ -114,7 +115,7 @@ export default {
}, },
{ {
id: 8, id: 8,
event: '事件8', event: 'Event-8',
timeLine: 25, timeLine: 25,
comment: '无' comment: '无'
} }