huangshuwei
commented
1 year ago 解决方案：
1、通过 scroll-width 设置滚动区域宽度，如果滚动宽度是固定的，则设置固定值。如果滚动宽度不固定则可以设置 scroll-width=0 ，那么列宽度总和大于外层容器宽度时就会出现滚动条
2、给列设置宽度，防止容器变小，列宽被压缩
示例代码
<template>
<ve-table
style="width:100%"
:scroll-width="0"
border-y
:columns="columns"
:table-data="tableData"
/>
</template>
<script>
export default {
data() {
return {
columns: [
{ field: "col1", key: "a", title: "Title1", width: 200,fixed:"left" },
{ field: "col2", key: "b", title: "Title2", width: 100 },
{ field: "col3", key: "c", title: "Title3", width: 100 },
{ field: "col4", key: "d", title: "Title4", width: 100 },
{ field: "col5", key: "e", title: "Title5", width: 100 },
{ field: "col6", key: "f", title: "Title6", width: 100 },
{ field: "col7", key: "g", title: "Title7", width: 100 },
{ field: "col8", key: "h", title: "Title8", width: 100 },
{ field: "col9", key: "i", title: "Title9", width: 100 },
{ field: "col10", key: "j", title: "Title10", width: 100 },
],
tableData: [
{
col1: "1",
col2: "2",
col3: "3",
col4: "4",
col5: "5",
col6: "6",
col7: "7",
col8: "8",
col9: "9",
col10: "10",
},
{
col1: "1jdosajdsajdsaojdosadjsaodjasodjsaopdjas dasjodsaopdsaj ",
col2: "2",
col3: "3",
col4: "4",
col5: "5",
col6: "6",
col7: "7",
col8: "8",
col9: "9",
col10: "10",
},
],
};
},
};
</script>补充 当某一列数据过多时，可以考虑添加列宽拖动功能，参考：https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/column-resize
把表格设置成style="width: 100%"时， 数据过多时， 不会出现横向滚动条，但会撑破div，该如何设置，当列过多时（style=“widt:100%”），自动出现滚动条