[TOC]
>[warning] 本项目`element ui`版本为`2.4.7`
## ele-table 使用懒加载 load 并设置默认展开项（expand-row-keys）
> 问题描述：load 需要配置 tree-props，而 hasChildren 字段为 true 时才会有展开图标，但是如果配合 expand-row-keys 则发现下一个节点无展开图标了！！！
### 解决方案
~~~
// 1 默认展开的项的 hasChildren 配置为 false ！
// 2 配置默认展开项的下一层节点
<el-table
lazy
:data="tableData"
:load="load"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:expand-row-keys="expandRow"
></el-table>
<script>
export default {
data() {
return {
expandRow: [], // 默认展开的项
tableData: []
}
},
created () {
this.tableData=[1,2,3,4,5,6,7].map((item, i) => {
const id = i.toString()
this.expandRow.push(id)
return {
id,
children: [1,2,3,4,5,6,7,8,9].map((ele, i) => ({
id: id + '-' + i,
children: [],
hasChildren: true
})), // 2 配置默认展开项的下一层节点
hasChildren: false // 1 默认展开的项的 hasChildren 配置为 false ！
}
})
}
}
</script>
~~~
## ele-table 如何自定义表头
官方推荐的方案有两种
#### 1. 设置`Scoped slot`来自定义表头
~~~
<el-table
:data="tableData"
// ...
>
<el-table-column
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
// ...
</template>
</el-table-column>
</el-table>
~~~
该方案在本项目中设置未生效
#### 2. 使用属性`render-header`方法
~~~
<el-table-column
// ...
:render-header="renderHeader"
>
<template slot-scope="scope">
// ...
</template>
</el-table-column>
~~~
>[success] 和createElement(tag,{},String)类似这里第三个参数传递数组用于存放子元素
> 有关标签的属性设置放在`props`中，事件放在`on`中
~~~
export default {
// ...
methods: {
// 重新更改表头标题
renderHeader(h) {
return [
h(
'el-dropdown',
{ props: { placement: 'bottom-start' }, on: { command: this.handleTimeSort } },
[
h('span', { class: { 'el-dropdown-link': true } }, [
h('span', { domProps: { innerHTML: '时间' } }),
h('i', { class: { 'el-icon-arrow-down': true } })
]),
h('el-dropdown-menu', { slot: 'dropdown' }, [
h('el-dropdown-item', {
class: { 'dropdown-active': this.active },
domProps: { innerHTML: '修改时间' },
props: { command: 'lastTime' }
}),
h('el-dropdown-item', {
class: { 'dropdown-active': !this.active },
domProps: { innerHTML: '注册日期' },
props: { command: 'createTime' }
})
])
]
)
]
},
}
}
~~~
该方案成功解决, 如果你的项目能够支持`jsx`编译，那么这里使用`jsx`语法会更为便捷
~~~
renderHeader() {
return (
<el-dropdown
placement="bottom-start"
:command="handleTimeSort"
// ...
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="lastTime"
// ...
>
修改日期
</el-dropdown-item>
<el-dropdown-item
command="createTime"
// ...
>
注册日期
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
)
}
~~~
