[Feature Request] 自定义列如何配置最小宽度?

appleqzw commented 9 months ago

选择要提交 issue 的库

vue-easytable

Issue 类型

Feature

Issue 标题

自定义列如何配置最小宽度?

这个功能解决了什么问题？

某几列的宽度想要有个最小宽度，如果表格宽度有多余的，那就拓宽但是目前的width是按百分比或像素比的比例去缩放，无法实现最小宽度，就导致那几列的内容换行挤在一起了

你期望的 API 是什么样的？

Columns配置里加个minWidth，或者有什么别的方法实现列的最小宽度么？

huangshuwei commented 9 months ago

当表格列的宽度之和小于表格宽度时，列宽会压缩。你可以尝试给表格最小宽度避免列宽压缩。形如：

<ve-table
            style="min-width:800px;"
            :columns="columns"
            :table-data="tableData"
        />

appleqzw commented 9 months ago

当表格列的宽度之和小于表格宽度时，列宽会压缩。你可以尝试给表格最小宽度避免列宽压缩。形如：
<ve-table
            style="min-width:800px;"
            :columns="columns"
            :table-data="tableData"
        />

额，我的业务场景是：表格在一个右侧展开的抽屉弹框中展示，抽屉弹框的宽度是固定的，表格的宽度也就固定了（450px）然后表格有蛮多列的，第一列的title就“日期”2个字，设置了word-break: keep-all;，然后出了横向滚动条，但是第一列显示的日期（yyyy-mm-dd这种格式）还是会换行，所以就想能不能有个最小宽度给第一列，让它宽度足够不用换行目前是用

renderHeaderCell: ({ column }, h) => {
      return h('div', { style: { minWidth: '110px' } }, '日期')
},

和word-break: keep-all; 来给第一列的表头的样式设置了个最小宽度，从而实现了最小宽度的效果，暂时先这么解决吧，如果有更好的方法也可以交流下~

Happy-Coding-Clans / vue-easytable