table 嵌套 slot="expandedRowRender"，@expand，expandedRowKeys 展开行
1
1.1 展开行,控制属性 ，expandedRowKeys，当有表格有 嵌套内容时使用，
注意expandedRowKeys放在父table上
1.2 expandedRowKeys 属性存在的话会使得默 点击展开图标不起作用，因继续起作用要配合
expand 事件一起使用
- expandedRowKeys 展开的行控制属性，对应于行的key值及类型
这个属性放在父table 上。
例如下例子，父表格的key 属性是 数字类型
点击 全部展开按钮，对应的嵌套表格全部展开 ；全部折叠按钮，对应的嵌套表格全部折叠
<a-button type="primary" style="margin-bottom:10px" @click="allcontroltable">
全部展开
</a-button>
<a-button type="primary" style="margin-bottom:10px" @click="alltablecollaps">
全部折叠
</a-button>
<!-- 表格分页组件S -->
<a-table
style="font-size:16px;"
:columns="columns"
:dataSource="data"
ref="table"
:expandedRowKeys="expandedRowKeys"
@expand="expandicon"
:pagination="pagination"
@change="(pagination)=>handleTableChange(pagination)">>
<a-table
slot="expandedRowRender"
slot-scope="record"
:columns="innerColumns"
:dataSource="innerData"
:pagination="false"
style="font-size:10px;"
>
</a-table>
</a-table>
<!-- 表格分页组件S -->
methods:{
// 全部折叠
alltablecollaps () {
this.expandedRowKeys = []
},
// 全部展开
allcontroltable () {
var that = this
this.expandedRowKeys = [...Array(that.pagination.pageSize).keys()]
},
// 折叠展开图标点击事件
expandicon (expanded, record) {
if (expanded) {
this.expandedRowKeys.push(record.key)
} else {
var expandedRowKeys = this.expandedRowKeys.filter(RowKey => RowKey !== record.key)
this.expandedRowKeys = expandedRowKeys
}
},
},
data(){
retrun {
expandedRowKeys :[],// 若expandedRowKeys=[1,2,3]表示展开的行是第1,2,3行,她主要受制于，key属性，行的keys 值在数组中则展开对应key值的行
columns: [
{
title: '订单编号',
dataIndex: 'ddbh',
align: 'center'
},
{
title: '班次',
dataIndex: 'bc',
align: 'center'
},
{
title: '计划开工时间',
dataIndex: 'kssj',
align: 'center'
},
{
title: '计划完工时间',
dataIndex: 'jssj',
align: 'center'
},
{
title: '实际开工时间',
dataIndex: 'sjkssj',
align: 'center'
},
{
title: '实际完工时间',
dataIndex: 'sjjssj',
align: 'center'
},
{
title: '计划完成量',
dataIndex: 'jhwcl',
align: 'center'
},
{
title: '实际完成量',
dataIndex: 'sjwcl',
align: 'center'
},
{
title: '日计划状态',
dataIndex: 'rjhzt',
align: 'center'
},
{
title: '完成进度',
dataIndex: 'progress',
align: 'center',
key: 'progress',
scopedSlots: { customRender: 'progress' },
width: 150
}
],
innerColumns: [
{
title: '订单编号',
dataIndex: 'ddbh',
align: 'center'
},
{
title: '班次',
dataIndex: 'bc',
align: 'center'
},
{
title: '计划开工时间',
dataIndex: 'kssj',
align: 'center'
},
{
title: '计划完工时间',
dataIndex: 'jssj',
align: 'center'
},
{
title: '实际开工时间',
dataIndex: 'sjkssj',
align: 'center'
},
{
title: '实际完工时间',
dataIndex: 'sjjssj',
align: 'center'
},
{
title: '计划完成量',
dataIndex: 'jhwcl',
align: 'center'
},
{
title: '实际完成量',
dataIndex: 'sjwcl',
align: 'center'
},
{
title: '日计划状态',
dataIndex: 'rjhzt',
align: 'center'
},
{
title: '完成进度',
dataIndex: 'progress',
align: 'center',
key: 'progress',
scopedSlots: { customRender: 'progress' },
width: 150
}
],
data: [],
}
},
mounted () {
for (let i = 1; i <= 20; i++) {
this.data.push({
key: i,
ddbh: i,
bc: i,
jhwcl: 100,
sjwcl: 80,
rjhzt: '月计划',
kssj: '2019-03-01',
jssj: '2019-03-02',
sjkssj: '2019-03-01',
sjjssj: '2019-03-02',
progress: 20
})
this.innerData.push({
key: i,
ddbh: i,
bc: i,
jhwcl: 100,
sjwcl: 80,
rjhzt: '日计划',
kssj: '2019-03-01',
jssj: '2019-03-02',
sjkssj: '2019-03-01',
sjjssj: '2019-03-02',
progress: 20
})
}
}
1.3 子表格 属性
:dataSource="innerData"
本例子说明。
innerData 可在data中任意起名 这里这么写适用于点击1行让其打开子表格，另一行的子表格折叠，整个页面中只显示一个行的子表格。
2
在实际需求中要求打开一父行的子表格，另一父行子表格不做处理，真个页面中能够根据实际需求打开多个子表格 属性
:dataSource="record.childpage" record 是来自父行作用域的。
如下
<a-table
style="font-size:16px;"
:columns="columns"
:dataSource="data"
ref="table"
:expandedRowKeys="expandedRowKeys"
@expand="expandicon"
:pagination="pagination"
@change="(pagination)=>handleTableChange(pagination)">
<span slot="progress" slot-scope="progress">
<a-progress :percent="progress" />
</span>
<a-table
slot="expandedRowRender"
slot-scope="record"
:columns="innerColumns"
:dataSource="record.childrendata?record.childrendata:[]"
:pagination="record.childpagedata"
style="font-size:10px;"
class="tablechild"
@change="childpagechange(record.childpagedata,record.monthplan)">
<span
slot="progress"
slot-scope="progress">
<a-progress :percent="progress" />
</span>
</a-table>
</a-table>
2.2 本实际业务中要求，子表格数据不跟父表格数据一起返回，且每次点开折叠图标，重新请求接子表格接口。这个时候，用到 expand事件点击展开图标时触发
expand事件 会返回 两个参数，第一个参数，事当前折叠状态 展开还是折叠，用true,false 表示，第二个参数record，是来自点击的行返回的行数据对象。
注意@expand 放在父table上
由于在本实际中，数据是点开折叠图标在请求接口，所以，而子表格的数据用的是来自行返回的数据。 因此需要用到 vue set 来动态的给 expand事件 返回的 第二个参数 record ，动态增加 childpagedata属性
// record 给一个对象动态添加属性
// childpagedata 为请求接口返回的子表格数据数组
this.$set(record,' childpagedata',childpagedata )
网友评论