element 表格表头排序混乱

element 表格表头排序混乱

<el-table-column prop="xxx" key="0" label="xxx"></el-table-column>
<el-table :data="liveTable" border>
                    <el-table-column type="index" key="0" label="序号" width="50" v-if="+form.station !== 1"></el-table-column>
                    <el-table-column prop="today_entry_rate1" key="1" label="学号" v-if="+form.station === 2"></el-table-column>
                    <el-table-column prop="today_entry_rate2" key="2" label="昵称" v-if="+form.station === 2"></el-table-column>
                    <el-table-column prop="today_entry_rate3" key="3" label="名字" v-if="+form.station === 2"></el-table-column>
                    <el-table-column prop="today_entry_rate4" key="4" label="到课统计" v-if="+form.station === 2"></el-table-column>
                    <el-table-column prop="today_entry_rate5" key="5" label="到课时间" v-if="+form.station === 2"></el-table-column>
                    <el-table-column prop="today_entry_rate6" key="6" label="日期" v-if="+form.station === 3 || +form.station === 4"></el-table-column>
                    <el-table-column prop="today_entry_rate7" key="8" label="观看时长" v-if="+form.station === 3 || +form.station === 4"></el-table-column>
                    <el-table-column prop="today_entry_rate8" key="7" label="直播" v-if="+form.station === 3"></el-table-column>
                    <el-table-column prop="today_entry_rate9" key="9" label="直播总时长" v-if="+form.station === 3"></el-table-column>
                    <el-table-column prop="today_entry_rate10" key="10" label="直播回放" v-if="+form.station === 4"></el-table-column>
                </el-table>

可以采用为每个Table-column添加一个唯一属性key的方式来保证表格渲染的顺序,例子如上
此方面针对于这种判断条件多的表格渲染

你可能感兴趣的:(element-ui,javascript,elementui,vue.js)