vue2+ant design vue折叠表格并更改默认图标_antd vue折叠表格-优快云博客

本文链接：https://blog.youkuaiyun.com/Will_Season/article/details/133810006

本文介绍如何在Vue2项目中使用Ant Design Vue库创建折叠表格，并自定义默认展开折叠图标。通过HTML结构和JavaScript代码实现表格行的动态折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分:

<template>
    <div>
       <a-table :columns="columns" 
                :data-source="messageWarningInfo" 
                class="components-table-demo-nested"
                ref="table" 
                size="small"
                rowKey="id" 
                :pagination="pagination" 
                :loading="loading"    
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange:                             
                onSelectChange,onSelect: onSelectRow }"               
                @expand="getInnerData"             
                :expand-icon="expandIcon"
                    >
                        <a-table
                            slot="expandedRowRender"
                            :columns="innerColumns"
                            :data-source="inndata"
                            :pagination="false"
                        >
                        <span slot="warningLevel" slot-scope="text, record"> 
                            <JDictSelectTag placeholder="请输入预警等级" v-        model="record.warningLevel" disabled dictCode="bridge_warning_level"></JDictSelectTag>
                        </span>
                        <span slot="warningWay" slot-scope="text, record" style="display: flex;"> 
                            <div v-for="item in (record.warningWay.split(','))" :key="item.id">
                                <a-tag color="blue">
                                    <span v-if="item == '3'">{{ '调度单' }}</span>
                                    <span v-if="item == '2'">{{ '短信' }}</span>
                                    <span v-if="item == '1'">{{ 'App' }}</span>
                                    <span v-if="item == '0'">{{ '站内信' }}</span>
                                </a-tag>
                            </div>
                        </span>
                        </a-table>
                    </a-table>
                </div>
</template>

script部分:

<script>
export default {
    data(){
        return{
            messageWarningInfo:[],//父表格数据
            inndata:[],//子表格数据
            selectedRowKeys: [], // 默认选中的行的 key 数组
            selectRows:[],//默认选中的行的数据
            checkChangeRows:[],//勾选改变后行的数据
            TableChange:{},//页码改变时获取页码
            loading:false,//加载动画
            addedRowKeys: [], // 新增勾选的数据
            removedRowKeys: [], // 取消勾选的数据
            /* 分页参数 */
            pagination: {
              current: 1,
              pageSize: 10,
              pageSizeOptions: ['10', '20', '30', '50', '100'],
              showTotal: (total, range) => {
              return range[0] + '-' + range[1] + ' 共' + total + '条';
            },
              showQuickJumper: true,
              showSizeChanger: true,
              total: 0
          },
            /* 父表格列 */
            columns:[
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'left',
                    customRender: function(t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '桥梁名称',
                    align: 'left',
                    dataIndex: 'bridgeName',
                    key: 'bridgeName'
                },
                {
                    title: '设备名称',
                    align: 'left',
                    dataIndex: 'deviceName',
                    key: 'deviceName'
                },
                {
                    title: '参数名称',
                    align: 'left',
                    dataIndex: 'paramName',
                    key: 'paramName'
                },
            ],
                /* 子表格列 */
                innerColumns:[
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'left',
                    customRender: function(t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '预警等级',
                    align: 'left',
                    dataIndex: 'warningLevel',
                    scopedSlots: { customRender: 'warningLevel' },
                    key: 'warningLevel'
                },
                {
                    title: '预警类型',
                    align: 'left',
                    dataIndex: 'warningWay',
                    scopedSlots: { customRender: 'warningWay' },
                    key: 'warningWay'
                },
                {
                    title: '下限值',
                    align: 'left',
                    dataIndex: 'minTh',
                    key: 'minTh'
                },
                {
                    title: '上限值',
                    align: 'left',
                    dataIndex: 'maxTh',
                    key: 'maxTh'
                },
            ],
        }
    },
        methods:{
         //子集列表
        getInnerData(expanded, record) {
            console.log('子集列表-record',record.warningStandardScopes,'expanded',expanded);
            // 判断是否点开
            if (expanded) { 
                // 再将父级点击的那一行的数据（record）给子级数据存进去，具体情况根据自己需求更改
                this.inndata = record.warningStandardScopes
            }
        },
        //更换默认的icon
        expandIcon(props) {
            if (props.record) {
                if (props.expanded) {//有数据-展开时候图标
                return (
                <a
                    style="color: 'black',margin-right:0px"
                    onClick={(e) => {
                    props.onExpand(props.record, e);
                    }}
                >
                    <a-icon type="down" />{" "}
                </a>
                );
            } else {//有数据-未展开时候图标
                return (
                <a
                    style="color: 'black' ,margin-right:0px"
                    onClick={(e) => {
                    props.onExpand(props.record, e);
                    }}
                >
                    <a-icon type="right" />
                </a>
                );
            }
            } else {//无数据-图标
            return (
                <span style="margin-right:0px">
                <a-icon type="smile" />
                </span>
            );
            }
        },
    }

}
</script>