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

add element ui table expand and selcet by slot

This commit is contained in:
liugq 2019-02-15 16:21:22 +08:00
parent 72367cd5e1
commit e81febac06
3 changed files with 71 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,9 @@
<template>
<el-table :data="res" :row-style="isShowRow" border style="width: 100%">
<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-column
v-for="item in columns"
:label="item.label"
@ -17,12 +21,16 @@
>
<i
v-if="!scope.row.__expand"
:style="{'padding-left':+scope.row.__level*50 + 'px'} "
:style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
class="el-icon-plus"
/>
<i v-else :style="{'padding-left':+scope.row.__level*50 + 'px'} " class="el-icon-minus"/>
<i v-else :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} " class="el-icon-minus"/>
</span>
</template>
<template v-if="item.key==='__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)"/>
<el-checkbox v-else :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} " v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)"/>
</template>
{{ scope.row[item.key] }}
</slot>
</template>
@ -45,11 +53,26 @@ export default {
default: () => []
},
/* eslint-disable */
evalFunc: {
renderContent: {
type: Function
},
evalArgs: Object
/* eslint-enable */
defaultExpandAll: {
type: Boolean,
default: false
},
defaultChildren: {
type: String,
default: 'children'
},
spreadOffset: {
type: Number,
default: 50
},
checkboxOffset: {
type: Number,
default: 50
}
},
computed: {
// 格式化数据源
@ -60,11 +83,9 @@ export default {
} else {
tmp = this.data
}
const func = this.evalFunc || treeToArray
const args = { ...this.evalArgs }
return func(tmp, args)
const func = this.renderContent || treeToArray
return func(tmp, { expand: this.defaultExpandAll, children: this.defaultChildren })
},
// 自定义的children字段
children() {
return this.evalArgs && this.evalArgs.children || 'children'
@ -86,17 +107,21 @@ export default {
const record = this.res[trIndex]
const expand = !record.__expand
record.__expand = expand
// 收起是全部收起，展开是一级一级展开
// if (!expand) {
// this.expandRecursion(record, expand)
// }
},
expandRecursion(row, expand) {
const children = row[this.children]
if (children && children.length > 0) {
children.map(child => {
child.__expand = expand
this.expandRecursion(child, expand)
handleCheckAllChange(row) {
this.selcetRecursion(row, row.__select, this.defaultChildren)
this.isIndeterminate = row.__select
},
selcetRecursion(row, select, children = 'children') {
if (select) {
this.$set(row, '__expand', true)
this.$set(row, '__show', true)
}
const sub_item = row[children]
if (sub_item && sub_item.length > 0) {
sub_item.map(child => {
child.__select = select
this.selcetRecursion(child, select, children)
})
}
}

2
src/components/TreeTable/readme.md
View File

@ -57,6 +57,8 @@ const data = [
const columns = [
// 建议第一列做展开收缩操作
{ label: '', key: '__spread', width: '200' },
// 如果添加复选框
{ label: '', key: '__checkbox', width: '200' },
{
value: string,
text: string,

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

@ -5,11 +5,24 @@
<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" :eval-args="args" border>
<template slot="__checkbox" slot-scope="{scope}">
<!-- 默认leaval 为 0 的时候，提供全选操作 -->
<el-checkbox v-if="scope.row[children]&&scope.row[children].length>0" :style="{'padding-left':+scope.row.__level*50 + 'px'} " :indeterminate="scope.row.__select" v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)">全</el-checkbox>
<el-checkbox v-else :style="{'padding-left':+scope.row.__level*50 + 'px'} " v-model="scope.row.__select" @change="handleCheckAllChange(scope.row)">选</el-checkbox>
<tree-table :data="data" :columns="columns" :default-expand-all="true" border style="width: 100%" default-children="son" >
<template slot="__selection" >
<el-table-column
type="selection"
width="55"/>
</template>
<template slot="__expand">
<el-table-column
type="expand"
width="55">
<template slot-scope="props">
<el-button size="mini" type="danger" @click="handleExpandClick(props)">点我</el-button>
</template>
</el-table-column>
</template>
<template slot="__opt" slot-scope="{scope}">
<el-button size="mini" type="primary" @click="handleClick(scope)">点我</el-button>
</template>
</tree-table>
</div>
@ -30,11 +43,6 @@ export default {
key: '__checkbox',
width: 400
},
{
label: '',
key: '__sperad',
width: 400
},
{
label: 'ID',
key: 'id'
@ -49,8 +57,8 @@ export default {
key: 'timeLine'
},
{
label: '备注',
key: 'comment'
label: '操作',
key: '__opt'
}
],
data:
@ -129,31 +137,13 @@ export default {
]
},
args: { children: 'son' },
isIndeterminate: false
}
},
computed: {
children() {
return this.args && this.args.children || 'children'
isIndeterminate: false,
children: 'son'
}
},
methods: {
handleCheckAllChange(row) {
this.selcetRecursion(row, row.__select, this.children)
this.isIndeterminate = row.__select
},
selcetRecursion(row, select, children = 'children') {
if (select) {
this.$set(row, '__expand', true)
this.$set(row, '__show', true)
}
const sub_item = row[children]
if (sub_item && sub_item.length > 0) {
sub_item.map(child => {
child.__select = select
this.selcetRecursion(child, select, children)
})
}
handleClick(scope) {
this.$message.success(scope.row.event)
}
}
}