ant-design-vue实现table隐藏加号,点击按钮显示子表格数据

原创
2021/05/18 17:30
阅读数 1.4W

原始需求如下表格,表格嵌套子表格,并隐藏加号,点击按钮显示子表格数据。

 

代码如下:

<a-table
	ref="table"
	size="middle"
	bordered
	rowKey="id"
	:columns="columns"
	:dataSource="dataSource"
	:pagination="ipagination"
	:loading="loading"
	class="j-table-force-nowrap"
	@change="handleTableChange"
	:expandIconColumnIndex="-1"
	:expandIconAsCell="false"
	:expandedRowKeys= "expandedRowKeys">

	<span slot="historyAction" slot-scope="text, record">
		<a @click="handleShowExpandedRow(expandedRowKeys[0] !== record.id, record)">{{expandedRowKeys[0] === record.id ? '收起' : '查看' }}</a>
	</span>

	<a-table
		slot="expandedRowRender"
		slot-scope="text"
		:columns="innerColumns"
		:data-source="innerData"
		:pagination="false"
		 bordered
		:expandedRowKeys="innerColumns.map(item => item.dataIndex)">
	</a-table>
</a-table>

关键点:

隐藏+号,父table需要设置

  • :expandIconColumnIndex="-1" // +号显示在哪一列,-1为不显示
    :expandIconAsCell="false" //去除表格标题栏+号(这个属性api文档中没有找到,找了ant design的文档才找到)

 

  • 点击时需要展开子表格,代码如下
  • :expandedRowKeys= "expandedRowKeys" //展开行的keys,控制要展开哪些行
    
    data () {
    	expandedRowKeys: [],
    	innerColumns:[],
    	innerData:[]
    。。。
    },
    methods: {
    	handleShowExpandedRow: function (expanded, record) {
    	this.innerData=[];
    	this.expandedRowKeys=[];//设置为空,就自动闭合了
    	if(expanded===true){
    		this.expandedRowKeys.push(record.id);
    		getAction(this.url.queryOpListByDataId, {dataId: record.id}).then((res) => {
    			if (res.success) {
    				this.innerData = res.result;
    			}
    		});
    	}
    }

     

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部