vue el-table不用jsx生成动态表头

接上篇文章,可以这样写

<template>
    <el-table-column
        v-if="data.children.length != 0"
        :label="data.label"
        :prop="data.prop"
    >
        <template v-for="(item, index) in data.children">
            <tableCol :data="item" :key="index"></tableCol>
        </template>
    </el-table-column>
    <!--上面的意思是，加入有下级chilren就再次进入这个组件，注意tableCol要跟下面的name一样
    就是表示循环自身-->
    <el-table-column v-else :label="data.label" :key="`${Math.random()}`" :prop="data.prop">
这里要加一个随机数的key。eletable有个奇怪问题。就是多刷新几次数据，表头会丢失。一定要key是随机数才不丢失,如果自己表头有固定项的，这个固定项的id也随机。这个随机数最好在组装数据的时候添加上，假如:Key里面写随机数，会出现表头抖动的问题
        <template slot-scope="scope">
            <div @click="test(scope.row)">写你要自定义的数据</div>
        </template>
    </el-table-column>
    <!--这段就是不是children就输数据吧。（可自定义）-->
</template>
<script>
export default {
    name: "tableCol",
    props: ["data"],
};
</script>

最后假如表格样式有问题（譬如加了fixed）。要数据插入后。doLayout一下，渲染css。