Vue+element el-table 横向表格展示数据,表格错位
横向表格不允许出现滚动条,在页面展示全数据,使用 css table-layout: auto;属性,发生错位
代码如下:
<template>
<el-row style="height: 100%; width: 100%;background-color: black;">
<el-col :span="8" class="el-col">
</el-col>
<el-col :span="8" class="el-col">
<el-table border :data="CB_TableData" ref="table">
<el-table-column v-for="(item, index) in CB_TableTitle" :label="item" :key="index" align="center">
<template slot-scope="scope">
{{ scope.row[index] }}
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="1" class="el-col">
</el-col>
<el-col :span="7" class="el-col">
<el-button type="button" @click="ck">doLayout</el-button>
</el-col>
<el-col :span="24" class="el-col">
</el-col>
</el-row>
</template>
<script>
export default {
name: "LD_ScanRate",
data() {
return {
CB_TableData: [["第一", "a", "a", "a", "a", "a", "a", "a", "a", "a", "a"], ["第二", "b", "b", "b", "b", "b", "b", "b", "b", "b", "b"]],
CB_TableTitle: ["序号", "AA", "AA", "AA", "AA", "AA", "AA", "AA", "AA", "AA", "AA"]
};
},
created() { },
mounted() {
},
methods: {
ck() {
this.$nextTick(() => {
this.$refs.table.doLayout()
console.log(1)
})
},
}
}
</script>
<style lang="less" scoped>
.el-col {
height: 50%;
}
/deep/ .el-table--border .el-table__cell,
/deep/ .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid #004cff;
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
border-bottom: 1px solid #004cff;
}
/deep/.el-table__header-wrapper table,
/deep/.el-table__body-wrapper table {
width: 100% !important;
}
/deep/ .el-table__empty-block,
/deep/ .el-table__body {
width: 100% !important;
}
/deep/.el-table__body,
/deep/.el-table__footer,
/deep/.el-table__header {
table-layout: auto;
}
</style>