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

update

Browse Source
This commit is contained in:
Pan
2019-03-05 11:32:58 +08:00
parent e894a1c59d
commit e52c9075cc
3 changed files with 113 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
// 扁平化数组 // Flattened array
export default function treeToArray(data, children = 'children') { export default function treeToArray(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 = treeToArray(item[children], children) const res = treeToArray(item[children], children)
@@ -14,15 +14,13 @@ export default function treeToArray(data, children = 'children') {
return tmp return tmp
} }
// 给数据添加额外的几个属性
// 清除__parent属性，因数据循环引用，使用JSON.stringify()报错
export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) { export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
data.forEach((item, idx) => { data.forEach(item => {
Vue.set(item, '__level', level) Vue.set(item, '_level', level)
Vue.set(item, '__expand', expand) Vue.set(item, '_expand', expand)
Vue.set(item, '__parent', parent) Vue.set(item, '_parent', parent)
Vue.set(item, '__show', show) Vue.set(item, '_show', show)
Vue.set(item, '__select', select) Vue.set(item, '_select', select)
if (item[children] && item[children].length > 0) { if (item[children] && item[children].length > 0) {
addAttrs(item[children], { addAttrs(item[children], {
parent: item, parent: item,
@@ -36,14 +34,12 @@ export function addAttrs(data, { parent = null, level = 0, expand = false, child
}) })
} }
// 清除__parent属性
export function cleanAttrs(data, children = 'children') { export function cleanAttrs(data, children = 'children') {
data.forEach(item => { data.forEach(item => {
item.__parent = null item._parent = null
if (item[children] && item[children].length > 0) { if (item[children] && item[children].length > 0) {
addAttrs(item[children], children) addAttrs(item[children], children)
} }
}) })
return data return data
} }

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

@@ -11,23 +11,23 @@
<template slot-scope="scope"> <template slot-scope="scope">
<slot :scope="scope" :name="item.key"> <slot :scope="scope" :name="item.key">
<template v-if="item.expand"> <template v-if="item.expand">
<span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/> <span :style="{'padding-left':+scope.row._level*spreadOffset + 'px'} "/>
<span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)"> <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-if="!scope.row._expand" class="el-icon-plus" />
<i v-else class="el-icon-minus" /> <i v-else class="el-icon-minus" />
</span> </span>
</template> </template>
<template v-if="item.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] }}
@@ -89,7 +89,7 @@ export default {
this.tableData = [] this.tableData = []
return return
} }
console.log('render')
if (this.guard > 0) { if (this.guard > 0) {
addAttrs(val, { addAttrs(val, {
expand: this.defaultExpandAll, expand: this.defaultExpandAll,
@@ -101,15 +101,15 @@ export default {
const retval = treeToArray(val, this.defaultChildren) const retval = treeToArray(val, this.defaultChildren)
this.tableData = retval this.tableData = retval
}, },
deep: true, // deep: true,
immediate: true immediate: true
} }
}, },
methods: { methods: {
showRow: function({ row }) { showRow: function({ row }) {
const parent = row.__parent const parent = row._parent
const show = parent ? parent.__expand && parent.__show : true const show = parent ? parent._expand && parent._show : true
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;'
@@ -119,22 +119,22 @@ export default {
}, },
toggleExpanded(trIndex) { toggleExpanded(trIndex) {
const record = this.tableData[trIndex] const record = this.tableData[trIndex]
const expand = !record.__expand const expand = !record._expand
record.__expand = expand record._expand = expand
}, },
handleCheckAllChange(row) { handleCheckAllChange(row) {
this.selcetRecursion(row, row.__select, this.defaultChildren) this.selcetRecursion(row, row._select, this.defaultChildren)
this.isIndeterminate = row.__select this.isIndeterminate = row._select
}, },
selcetRecursion(row, select, children = 'children') { selcetRecursion(row, select, children = 'children') {
if (select) { if (select) {
this.$set(row, '__expand', true) this.$set(row, '_expand', true)
this.$set(row, '__show', true) this.$set(row, '_show', true)
} }
const sub_item = row[children] const sub_item = row[children]
if (sub_item && sub_item.length > 0) { if (sub_item && sub_item.length > 0) {
sub_item.map(child => { sub_item.map(child => {
child.__select = select child._select = select
this.selcetRecursion(child, select, children) this.selcetRecursion(child, select, children)
}) })
} }
@@ -164,20 +164,6 @@ export default {
<style lang="scss" rel="stylesheet/scss" scoped> <style lang="scss" rel="stylesheet/scss" scoped>
$color-blue: #2196f3; $color-blue: #2196f3;
$space-width: 18px;
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: $space-width;
height: 14px;
&::before {
content: "";
}
}
.tree-ctrl { .tree-ctrl {
position: relative; position: relative;

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

@@ -1,11 +1,42 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-tag style="margin-bottom:20px;"> <div style="margin-bottom:20px;">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-tag>
<tree-table :data="data" :columns="columns" border/> <el-button type="primary" class="option-item">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-button>
<div class="option-item">
<el-tag>默认展开所有</el-tag>
<el-switch
v-model="defaultExpandAll"
active-color="#13ce66"
inactive-color="#ff4949"
@change="reset"/>
</div>
<div class="option-item">
<el-tag>显示Checkbox</el-tag>
<el-switch
v-model="showCheckbox"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</div>
</div>
<tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
<template slot="scope" slot-scope="{scope}">
<el-tag>level: {{ scope.row._level }}</el-tag>
<el-tag>expand: {{ scope.row._expand }}</el-tag>
<el-tag>select: {{ scope.row._select }}</el-tag>
</template>
<template slot="operation" slot-scope="{scope}">
<el-button type="primary" size="" @click="click(scope)">Click</el-button>
</template>
</tree-table>
</div> </div>
</template> </template>
@@ -19,6 +50,9 @@ export default {
components: { treeTable }, components: { treeTable },
data() { data() {
return { return {
defaultExpandAll: false,
showCheckbox: true,
key: 1,
columns: [ columns: [
{ {
label: 'Checkbox', label: 'Checkbox',
@@ -36,88 +70,83 @@ export default {
align: 'left' align: 'left'
}, },
{ {
label: '时间线', label: 'Scope',
key: 'timeLine' key: 'scope'
}, },
{ {
label: '备注', label: 'Operation',
key: 'comment' key: 'operation'
} }
], ],
data: [ data: [
{ {
id: 0, id: 0,
event: 'Event-0', event: 'Event-0',
timeLine: 50, timeLine: 50
comment: '无'
}, },
{ {
id: 1, id: 1,
event: 'Event-1', event: 'Event-1',
timeLine: 100, timeLine: 100,
comment: '无',
children: [ children: [
{ {
id: 2, id: 2,
event: 'Event-2', event: 'Event-2',
timeLine: 10, timeLine: 10
comment: '无'
}, },
{ {
id: 3, id: 3,
event: 'Event-3', event: 'Event-3',
timeLine: 90, timeLine: 90,
comment: '无',
children: [ children: [
{ {
id: 4, id: 4,
event: 'Event-4', event: 'Event-4',
timeLine: 5, timeLine: 5
comment: '无'
}, },
{ {
id: 5, id: 5,
event: 'Event-5', event: 'Event-5',
timeLine: 10, timeLine: 10
comment: '无'
}, },
{ {
id: 6, id: 6,
event: 'Event-6', event: 'Event-6',
timeLine: 75, timeLine: 75,
comment: '无',
children: [ children: [
{ {
id: 7, id: 7,
event: 'Event-7', event: 'Event-7',
timeLine: 50, timeLine: 50,
comment: '无',
children: [ children: [
{ {
id: 71, id: 71,
event: 'Event-7-1', event: 'Event-7-1',
timeLine: 25, timeLine: 25
comment: 'xx'
}, },
{ {
id: 72, id: 72,
event: 'Event-7-2', event: 'Event-7-2',
timeLine: 5, timeLine: 5
comment: 'xx'
}, },
{ {
id: 73, id: 73,
event: 'Event-7-3', event: 'Event-7-3',
timeLine: 20, timeLine: 20
comment: 'xx'
} }
] ]
}, },
{ {
id: 8, id: 8,
event: 'Event-8', event: 'Event-8',
timeLine: 25, timeLine: 25
comment: '无'
} }
] ]
} }
@@ -127,6 +156,34 @@ export default {
} }
] ]
} }
},
watch: {
showCheckbox(val) {
if (val) {
this.columns.unshift({
label: 'Checkbox',
checkbox: true
})
} else {
this.columns.shift()
}
this.reset()
}
},
methods: {
reset() {
++this.key
},
click(scope) {
console.log(scope)
}
} }
} }
</script> </script>
<style scoped>
.option-item{
display: inline-block;
margin-right: 15px;
}
</style>