Element-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="listData" :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',
                    }
                ]
            }
        },
}

二、其他复杂数据结构

• 分析图表数据结构，这是一个表格结构，基本类型定位[{行},{行},{行}]的形式
• 然后再从列来分析，第一列为name,后面每一列为一个时间段，实际是一个以时间段为表头的数据结构，因此期望的数据结构为

{
    resource_name: '接入层',
    first: [
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''}
    ],
    second: [
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''}
    ],
    third: [
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''},
        {name: '',createTime: '', color: 'red', other: ''}
    ]
    ...
}

总结

element-table的数据结构比较清晰，先分析好行结构，然后从列结构里拆分字段即可。