自定义element中的table表格动态获取表头

转载

wx61133eeec1457 2021-08-13 10:14:12 博主文章分类：vue

element表格默认只需要传递进去数据，然后写死表头即可渲染数据。在本次业务开发过程中表格需求较多，表头数据不是固定的，最终解决为把table表格封装，页面中引入同一个table即可，而table通过父组件传递数据来动态渲染。

子组件

  <template>
    <el-table
            :data="listData"
            style="width: 100%"
            :cell-style="cellStyle"
            :header-row-class-name="headerClass"
            fit>
        <el-table-column
                v-for="(item, index) in listLabel"
                :key="index"
                :prop="item.prop"
                :label="item.label">
        </el-table-column>
    </el-table>

</template>

<script>
    export default {

        props: {
            listData: {
                type: Array,
                default: []
            },
            listLabel: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        name: "san-table",

        methods: {
            // 表格头部样式
            headerClass() {
                return 'table-header-class'
            },

            // element列表文字居中
            cellStyle () {
                return 'text-align:center;line-height: 8px;'
            },
        }
    }
</script>

父组件引用


<dj-sanTable :listData="tableData" :listLabel="listLabel"></dj-sanTable>
// 局部引用
import djSanTable from '/components/dj-sanTable'

components: {
    djSanTable
},

export default {
        data() {
            return {
                // 表头数据(随意写的数据）
                listLabel: [
                    {label: '车牌号', prop: 'carEntrustId'},
                    {label: '名称', prop: 'name'},
                    {label: '值', width: '', prop: 'carRewardId'},
                    {label: '价格', prop: 'carFundProvider'},
                    {label: '利润', prop: 'carFrameNo'},
                    {label: '大类', prop: 'carNo'},
                    {label: '小类', prop: 'acreage'},
                    {label: '有价格', prop: 'assetsType'},
                    {label: '极好价格', prop: 'incomePrice'},
                    {label: '优质价格', prop: 'rewardStatus'},
                    {label: '良好价格', prop: 'addTime'},
                    {label: '无价格', prop: 'addManagerName'},
                ],

                // 表格数据  (随意写的数据）
                tableData: [
                    {
                        carEntrustId: '1',
                        name: '23',
                        carRewardId: '34',
                        carFundProvider: '34',
                        carFrameNo: '354',
                        carNo: '534',
                        acreage: '93450',
                        assetsType: '44344',
                        incomePrice: '34',
                        rewardStatus: '23',
                        addTime: '23',
                        addManagerName: '23',
                    },
                    {
                        carEntrustId: '2',
                        name: '343',
                        carRewardId: '78',
                        carFundProvider: '34',
                        carFrameNo: '78',
                        carNo: '78',
                        acreage: '756',
                        assetsType: '354',
                        incomePrice: '34534',
                        rewardStatus: '23',
                        addTime: '23',
                        addManagerName: '23',
                    }
                ]
            }
        },
}