Commit 4bb506fb1f6ac7d246f8792d29f337ec003ff426
1 parent
c734f685
fix(table): fix editable cell not support `ellipsis`
修复可编辑单元格不支持ellipsis配置的问题 fixed: #944
Showing
3 changed files
with
25 additions
and
7 deletions
CHANGELOG.zh_CN.md
| 1 | 1 | ### 🐛 Bug Fixes |
| 2 | 2 | |
| 3 | 3 | - **ApiTreeSelect** 修复未能正确监听`params`变化的问题 |
| 4 | +- **BasicTable** 修复可编辑单元格不支持 ellipsis 配置的问题 | |
| 4 | 5 | |
| 5 | 6 | ## 2.6.1(2021-07-19) |
| 6 | 7 | |
| ... | ... | @@ -9,8 +10,10 @@ |
| 9 | 10 | - **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能 |
| 10 | 11 | - **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式，与其它菜单布局时的风格保持一致 |
| 11 | 12 | - **ApiTreeSelect** 扩展`antdv`的`TreeSelect`组件，支持远程数据源，用法类似`ApiSelect` |
| 12 | -- **BasicTable** 新增`ApiTreeSelect`编辑组件 | |
| 13 | -- 可以为不同的用户指定不同的后台首页： | |
| 13 | +- **BasicTable** | |
| 14 | + - 新增`ApiTreeSelect`编辑组件 | |
| 15 | + - 新增`headerTop`插槽 | |
| 16 | +- **其它** 可以为不同的用户指定不同的后台首页： | |
| 14 | 17 | - 在`getUserInfo`接口返回的用户信息中增加`homePath`字段(可选)即可为当前用户定制首页路径 |
| 15 | 18 | |
| 16 | 19 | ### 🐛 Bug Fixes |
| ... | ... | @@ -18,7 +21,6 @@ |
| 18 | 21 | - **BasicTable** |
| 19 | 22 | - 修复滚动条样式问题(移除了滚动样式补丁) |
| 20 | 23 | - 修复树形表格的带有展开图标的单元格的内容对齐问题 |
| 21 | - - 新增`headerTop`插槽 | |
| 22 | 24 | - 修复操作列的按钮在 disabled 状态下的颜色显示 |
| 23 | 25 | - 修复可编辑单元格的值不能直接通过修改`dataSource`来更新显示的问题 |
| 24 | 26 | - 修复使用`ApiSelect`编辑组件时的数据回显问题 |
| ... | ... | @@ -44,7 +46,7 @@ |
| 44 | 46 | - **其它** |
| 45 | 47 | - 修复菜单默认折叠的配置不起作用的问题 |
| 46 | 48 | - 修复`safari`浏览器报错导致网站打不开 |
| 47 | - - 修复在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题 | |
| 49 | + - 修复在 window 上，拉取代码后 eslint 因 endOfLine 而报错问题 | |
| 48 | 50 | - 修复因动态路由而产生的 `Vue Router warn` |
| 49 | 51 | |
| 50 | 52 | ### 🎫 Chores | ... | ... |
src/components/Table/src/components/editable/EditableCell.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="prefixCls"> |
| 3 | - <div v-show="!isEdit" :class="`${prefixCls}__normal`" @click="handleEdit"> | |
| 4 | - {{ getValues || ' ' }} | |
| 3 | + <div | |
| 4 | + v-show="!isEdit" | |
| 5 | + :class="{ [`${prefixCls}__normal`]: true, 'ellipsis-cell': column.ellipsis }" | |
| 6 | + @click="handleEdit" | |
| 7 | + > | |
| 8 | + <div class="cell-content" :title="column.ellipsis ? getValues || '' : ''">{{ | |
| 9 | + getValues || ' ' | |
| 10 | + }}</div> | |
| 5 | 11 | <FormOutlined :class="`${prefixCls}__normal-icon`" v-if="!column.editRow" /> |
| 6 | 12 | </div> |
| 7 | 13 | |
| ... | ... | @@ -420,6 +426,16 @@ |
| 420 | 426 | } |
| 421 | 427 | } |
| 422 | 428 | |
| 429 | + .ellipsis-cell { | |
| 430 | + .cell-content { | |
| 431 | + overflow-wrap: break-word; | |
| 432 | + word-break: break-word; | |
| 433 | + overflow: hidden; | |
| 434 | + white-space: nowrap; | |
| 435 | + text-overflow: ellipsis; | |
| 436 | + } | |
| 437 | + } | |
| 438 | + | |
| 423 | 439 | &__normal { |
| 424 | 440 | &-icon { |
| 425 | 441 | position: absolute; | ... | ... |