问题:
横向滚动条不显示;el-table 只有竖向滚动条拉到最底部时,才显示横向滚动条;
要达到效果:
不用竖向滚动条到底部,即可实现横向条显示;
主要设置:
设置el-table 外层css
设置el-table css
具体实现:
<template>
<div >
<el-row style="height: 300px;width: 800px;">
<el-table :data="tableData" style="width:100%" :height="400">
<el-table-column prop="date" label="日期" width="100" fixed>
</el-table-column>
<el-table-column prop="name" label="姓名" width="100">
</el-table-column>
<el-table-column prop="address" label="地址" width="100">
</el-table-column>
<el-table-column prop="date" label="日期" width="100">
</el-table-column>
<el-table-column prop="name" label="姓名" width="300">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="date" label="日期">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="name" label="姓名" width="100" fixed="right">
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
]
};
},
computed: {},
watch: {},
created () {
},
mounted () {
},
methods: {
},
}
</script>
<style >
</style>
如上设置即可实现所需效果;