theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): 修复 table 组件 ellipsisTooltip 属性不生效

Browse Source
This commit is contained in:
就眠儀式 2022-11-19 19:09:46 +08:00
parent 1239e6dbe6
commit 1a7eb00e05
8 changed files with 90 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
package/component/src/component/table/TableRow.vue
View File

@ -486,51 +486,53 @@ const radioProps = props.getRadioProps(props.data, props.index);
column.fixed ? `layui-table-fixed-${column.fixed}` : '', column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]" ]"
> >
<span <div style="display: flex">
v-if="expandSpace && columnIndex === expandIndex" <span
:style="{ 'margin-right': currentIndentSize + 'px' }" v-if="expandSpace && columnIndex === expandIndex"
></span> :style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
<span <span
v-if=" v-if="
expandSpace && expandSpace &&
!data[childrenColumnName] && !data[childrenColumnName] &&
!slot.expand && !slot.expand &&
columnIndex === expandIndex columnIndex === expandIndex
" "
class="layui-table-cell-expand-icon-spaced" class="layui-table-cell-expand-icon-spaced"
></span> ></span>
<lay-icon <lay-icon
v-if=" v-if="
(slot.expand || data[childrenColumnName]) && (slot.expand || data[childrenColumnName]) &&
columnIndex === expandIndex columnIndex === expandIndex
" "
class="layui-table-cell-expand-icon" class="layui-table-cell-expand-icon"
:type="expandIconType" :type="expandIconType"
@click="handleExpand" @click="handleExpand"
></lay-icon> ></lay-icon>
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true"> <lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
<slot
:name="column.customSlot"
:data="data"
:column="column"
></slot>
<template #content>
<slot <slot
:name="column.customSlot" :name="column.customSlot"
:data="data" :data="data"
:column="column" :column="column"
></slot> ></slot>
</template> <template #content>
</lay-tooltip> <slot
<slot :name="column.customSlot"
v-else :data="data"
:name="column.customSlot" :column="column"
:data="data" ></slot>
:column="column" </template>
></slot> </lay-tooltip>
<slot
v-else
:name="column.customSlot"
:data="data"
:column="column"
></slot>
</div>
</td> </td>
</template> </template>
@ -558,39 +560,42 @@ const radioProps = props.getRadioProps(props.data, props.index);
column.fixed ? `layui-table-fixed-${column.fixed}` : '', column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]" ]"
> >
<span <div style="display: flex">
v-if="expandSpace && columnIndex === expandIndex" <span
:style="{ 'margin-right': currentIndentSize + 'px' }" v-if="expandSpace && columnIndex === expandIndex"
></span> :style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
<span <span
v-if=" v-if="
expandSpace && expandSpace &&
!data[childrenColumnName] && !data[childrenColumnName] &&
!slot.expand && !slot.expand &&
columnIndex === expandIndex columnIndex === expandIndex
" "
class="layui-table-cell-expand-icon-spaced" class="layui-table-cell-expand-icon-spaced"
></span> ></span>
<lay-icon <lay-icon
v-if=" v-if="
(slot.expand || data[childrenColumnName]) && (slot.expand || data[childrenColumnName]) &&
columnIndex === expandIndex columnIndex === expandIndex
" "
class="layui-table-cell-expand-icon" class="layui-table-cell-expand-icon"
:type="expandIconType" :type="expandIconType"
@click="handleExpand" @click="handleExpand"
></lay-icon> ></lay-icon>
<lay-tooltip <lay-tooltip
v-if="column.ellipsisTooltip" v-if="column.ellipsisTooltip"
:content="data[column.key]" :content="data[column.key]"
:isAutoShow="true" :isAutoShow="true"
> >
{{ data[column.key] }} {{ data[column.key] }}
</lay-tooltip> </lay-tooltip>
<span v-else> {{ data[column.key] }} </span>
<span v-else> {{ data[column.key] }} </span>
</div>
</td> </td>
</template> </template>
</template> </template>

2
package/document-component/src/document/zh-CN/components/animation.md
View File

@ -10,7 +10,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo ::: demo 如上是不同的动画类名，点击上述绿色块，可直接预览动画。
<template> <template>
<div class="anim"> <div class="anim">

22
package/document-component/src/document/zh-CN/components/button.md
View File

@ -10,7 +10,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 `lay-button` 标签, 创建一个按钮 ::: demo 使用 `lay-button` 标签, 创建一个按钮。
<template> <template>
<lay-button type="primary">原始按钮</lay-button> <lay-button type="primary">原始按钮</lay-button>
@ -37,7 +37,7 @@ export default {
::: title 简约按钮 ::: title 简约按钮
::: :::
::: demo 使用 `border` 属性设置边框颜色 ::: demo 通过 `border` 属性设置边框颜色
<template> <template>
<lay-button>原始按钮</lay-button> <lay-button>原始按钮</lay-button>
@ -64,7 +64,7 @@ export default {
::: title 次要按钮 ::: title 次要按钮
::: :::
::: demo 使用 `border-style` 属性设置边框样式 ::: demo 通过 `border-style` 属性设置边框样式。
<template> <template>
<lay-button border-style="dashed">原始按钮</lay-button> <lay-button border-style="dashed">原始按钮</lay-button>
@ -91,7 +91,7 @@ export default {
::: title 按钮尺寸 ::: title 按钮尺寸
::: :::
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs` ::: demo 通过 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`。
<template> <template>
<lay-button type="primary" size="lg">原始按钮</lay-button> <lay-button type="primary" size="lg">原始按钮</lay-button>
@ -119,7 +119,7 @@ export default {
::: title 流式按钮 ::: title 流式按钮
::: :::
::: demo 使用 `fluid` 属性, 使其适合父最大宽度 ::: demo 通过 `fluid` 属性, 使其适合父级最大宽度。
<template> <template>
<lay-button type="primary" fluid>最大化按钮</lay-button> <lay-button type="primary" fluid>最大化按钮</lay-button>
@ -145,7 +145,7 @@ export default {
::: title 圆角按钮 ::: title 圆角按钮
::: :::
::: demo 使用 `radius` 属性，创建圆角按钮 ::: demo 通过 `radius` 属性，创建圆角按钮。
<template> <template>
<lay-button type="primary" radius>原始按钮</lay-button> <lay-button type="primary" radius>原始按钮</lay-button>
@ -173,7 +173,7 @@ export default {
::: title 按钮分组 ::: title 按钮分组
::: :::
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组 ::: demo 使用 `lay-button-group` 标签, 创建一个按钮组。
<template> <template>
<div> <div>
@ -212,7 +212,7 @@ export default {
::: title 图标按钮 ::: title 图标按钮
::: :::
::: demo 结合 `lay-icon` 组件, 创建图标按钮 ::: demo 结合 `lay-icon` 组件, 创建图标按钮。
<template> <template>
<lay-button-container> <lay-button-container>
@ -239,7 +239,7 @@ export default {
::: title 按钮容器 ::: title 按钮容器
::: :::
::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器 ::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器。
<template> <template>
<lay-button-container> <lay-button-container>
@ -266,7 +266,7 @@ export default {
::: title 加载按钮 ::: title 加载按钮
::: :::
::: demo 使用 `loading` 属性, 控制按钮的加载状态 ::: demo 通过 `loading` 属性, 控制按钮的加载状态。
<template> <template>
<lay-button-container> <lay-button-container>
@ -296,7 +296,7 @@ export default {
::: title 事件处理 ::: title 事件处理
::: :::
::: demo 使用 `@click` 设置单击回调 ::: demo 使用 `@click` 设置单击回调。
<template> <template>
<lay-button type="default" @click="clickHandle">单击事件</lay-button> <lay-button type="default" @click="clickHandle">单击事件</lay-button>

2
package/document-component/src/document/zh-CN/components/icon.md
View File

@ -10,7 +10,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 `color` 属性设置颜色 ::: demo 使用 `lay-icon` 标签创建一个图标。
<template> <template>
<lay-icon type="layui-icon-face-smile"></lay-icon> &nbsp; <lay-icon type="layui-icon-face-smile"></lay-icon> &nbsp;

4
package/document-component/src/document/zh-CN/components/select.md
View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-select` 标签, 创建下拉选择框 ::: demo 使用 `lay-select` 标签, 创建下拉选择框
<template> <template>
<lay-select v-model="value"> <lay-select v-model="value" placeholder="请选择">
<lay-select-option :value="1" label="学习"></lay-select-option> <lay-select-option :value="1" label="学习"></lay-select-option>
<lay-select-option :value="2" label="编码"></lay-select-option> <lay-select-option :value="2" label="编码"></lay-select-option>
<lay-select-option :value="3" label="运动"></lay-select-option> <lay-select-option :value="3" label="运动"></lay-select-option>
@ -42,7 +42,7 @@ export default {
<template> <template>
<lay-space> <lay-space>
<lay-select v-model="value2"> <lay-select v-model="value2" placeholder="请选择">
<lay-select-option :value="1" label="学习"></lay-select-option> <lay-select-option :value="1" label="学习"></lay-select-option>
<lay-select-option :value="2" label="编码"></lay-select-option> <lay-select-option :value="2" label="编码"></lay-select-option>
<lay-select-option :value="3" label="运动"></lay-select-option> <lay-select-option :value="3" label="运动"></lay-select-option>

2
package/document-component/src/document/zh-CN/components/table.md
View File

@ -308,7 +308,7 @@ export default {
] ]
const dataSource7 = [ const dataSource7 = [
{id: "1", name:"系统管理", score:100, children: [{id: "3", name:"用户管理", score:99},{id: "5", name:"角色管理", score:96,children: [{id: "7", name:"用户管理", score:99},{id: "8", name:"角色管理", score:96}]}]}, {id: "1", name:"系统管理11111111111111111111111111111111111111111111111", score:100, children: [{id: "3", name:"用户管理", score:99},{id: "5", name:"角色管理", score:96,children: [{id: "7", name:"用户管理", score:99},{id: "8", name:"角色管理", score:96}]}]},
{id: "2", name:"电商管理", score:100, children: [{id: "4", name:"商品管理", score:11},{id: "6", name:"分类管理", score:22}]}, {id: "2", name:"电商管理", score:100, children: [{id: "4", name:"商品管理", score:11},{id: "6", name:"分类管理", score:22}]},
] ]

2
package/document-component/src/document/zh-CN/components/transition.md
View File

@ -36,7 +36,7 @@ const changeVisible = () => {
::: title 淡入淡出 ::: title 淡入淡出
::: :::
::: demo 使用 `type` 属性，设置过渡方式。 ::: demo 通过 `type` 属性，设置你要采用的过渡效果。
<template> <template>
<lay-button @click="changeVisible1">开始</lay-button> <lay-button @click="changeVisible1">开始</lay-button>

2
package/document-component/src/document/zh-CN/guide/changelog.md
View File

@ -17,13 +17,13 @@
<h3>1.7.8 <span class="layui-badge-rim">2022-11-15</span></h3> <h3>1.7.8 <span class="layui-badge-rim">2022-11-15</span></h3>
<ul> <ul>
<li>[新增] upload 组件 auto 属性, 是否自动上传配置。</li> <li>[新增] upload 组件 auto 属性, 是否自动上传配置。</li>
<li>[修复] table 组件 ellipsisTooltip 属性不生效。</li>
<li>[优化] backtop 组件部分浏览器版本无法正常返回顶部。</li> <li>[优化] backtop 组件部分浏览器版本无法正常返回顶部。</li>
<li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li> <li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li>
<li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li> <li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li>
<li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li> <li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li>
<li>[优化] table 组件 default-toolbar 属性支持 Array 类型, 举例：['print']。</li> <li>[优化] table 组件 default-toolbar 属性支持 Array 类型, 举例：['print']。</li>
<li>[优化] select 组件 dropdown 关闭时统一清空 search 内容。</li> <li>[优化] select 组件 dropdown 关闭时统一清空 search 内容。</li>
<li></li>
</ul> </ul>
</li> </li>
</ul> </ul>