vue封装表格实现拓展行展开行

基于vxe表格封装

 

<template>
    <div class="main">
        <vxe-table
            ref="xTable"
            :data="tableData"
            @current-change="toggleRowExpansion"
            @cell-click="handleClickCell"
        >
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
            <vxe-column field="age" title="Age"></vxe-column>
            <vxe-column type="expand" width="1" class-name="expand">
                <template #content="{ row }">
                    <div class="pd-10px">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-edit"
                        >
                            编辑</el-button
                        >
                    </div>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: 10001,
                    name: 'Test1',
                    role: 'Develop',
                    sex: '0',
                    age: 28,
                    address: 'test abc',
                },
                {
                    id: 10002,
                    name: 'Test2',
                    role: 'Test',
                    sex: '1',
                    age: 22,
                    address: 'Guangzhou',
                },
                {
                    id: 10003,
                    name: 'Test3',
                    role: 'PM',
                    sex: '0',
                    age: 32,
                    address: 'Shanghai',
                },
                {
                    id: 10004,
                    name: 'Test4',
                    role: 'Designer',
                    sex: '1',
                    age: 23,
                    address: 'test abc',
                },
                {
                    id: 10005,
                    name: 'Test5',
                    role: 'Develop',
                    sex: '1',
                    age: 30,
                    address: 'Shanghai',
                },
                {
                    id: 10006,
                    name: 'Test6',
                    role: 'Designer',
                    sex: '1',
                    age: 21,
                    address: 'test abc',
                },
            ],
        };
    },
    mounted() {},
    methods: {
        toggleRowExpansion({ row, column }) {
            // 清除扩展列
            this.$refs.xTable.clearRowExpand();
            if (row) {
                let expands = [row];
                // 开启扩展列
                this.$refs.xTable.setRowExpand(expands, true);
            }
            this.$nextTick(() => {
                this.checkExpand();
            });
        },
        checkExpand() {
            let expand = this.$el.querySelector('.vxe-body--expanded-column');
            // 如果扩展没有内容直接隐藏
            if (expand.querySelector('.pd-10px').children.length == 0) {
                expand.style['border-bottom'] = 'none';
                expand.style['display'] = 'none';
            }
        },
        // 点击行事件
        handleClickCell({ row, rowIndex, column }) {
            this.toggleRowExpansion({ row, column });
        },
    },
};
</script>
<style lang="scss" scoped></style>

简单封装只实现了，拓展行的功能...