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

🐛(component): 修复 customSlot 结合 tooltip 的问题

Browse Source
This commit is contained in:
就眠儀式 2022-09-14 09:39:40 +08:00
parent d219e963c8
commit e38441538a
3 changed files with 171 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/popper/index.vue
View File

@ -35,7 +35,7 @@ import {
shallowRef, shallowRef,
computed, computed,
toRef, toRef,
StyleValue, StyleValue
} from "vue"; } from "vue";
import { onClickOutside, useEventListener, useThrottleFn } from "@vueuse/core"; import { onClickOutside, useEventListener, useThrottleFn } from "@vueuse/core";

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

@ -512,10 +512,12 @@ const radioProps = props.getRadioProps(props.data, props.index);
<lay-tooltip <lay-tooltip
v-if="column.ellipsisTooltip" v-if="column.ellipsisTooltip"
:content="data[column.key]"
:isAutoShow="true" :isAutoShow="true"
> >
<slot :name="column.customSlot" :data="data"></slot> <slot :name="column.customSlot" :data="data"></slot>
<template #content>
<slot :name="column.customSlot" :data="data"></slot>
</template>
</lay-tooltip> </lay-tooltip>
<slot v-else :name="column.customSlot" :data="data"></slot> <slot v-else :name="column.customSlot" :data="data"></slot>
</td> </td>

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

@ -1388,124 +1388,180 @@ export default {
::: demo 使用了绝大部分属性的 table 案例 ::: demo 使用了绝大部分属性的 table 案例
<template> <template>
<lay-table <lay-table :columns="columns4" :data-source="dataSource4">
id="id" <template v-slot:name="{ data }">
height="200px" {{ data.person != null ? data.person.name : '--' }}
:columns="columns5" </template>
:expand-index="1" <template v-slot:idcard="{ data }">
:data-source="dataSource5" {{ data.person != null ? data.person.idcard : '--' }}
:checkbox="checkbox5" </template>
:page="page5" <template v-slot:bank_name="{ data }">
:default-toolbar="defaultToolbar5" {{ data.person != null ? data.person.bank_name : '--' }}
v-model:selected-keys="selectedKeys5" </template>
@row="rowClick5"> <template v-slot:bank_no="{ data }">
<template v-slot:toolbar> {{ data.person != null ? data.person.bank_no : '--' }}
<lay-button size="sm" type="primary">新增</lay-button> </template>
<lay-button size="sm">删除</lay-button> <template v-slot:alipay_account="{ data }">
</template> {{
<template v-slot:name="{ data }"> {{data.name}} </template> data.person != null
<template v-slot:remark="{ data }"> {{data.remark}} </template> ? data.person.alipay_account != null
<template v-slot:name-title>😊</template> ? data.person.alipay_account
<template v-slot:birthday="{ data }"> {{data.birthday}} </template> : '未配置支付宝账号'
<template v-slot:operator="{ data }"> : '--'
<lay-button size="xs">修改</lay-button> }}
<lay-button size="xs" type="primary">删除</lay-button> </template>
</template> <template v-slot:phone="{ data }">
<template v-slot:expand="{ data }"> {{ data.person != null ? data.person.phone : '--' }}
<div style="height:100px;"> </template>
内容 <template v-slot:status="{ data }">
</div> <lay-badge v-if="data.status == 0">未发放</lay-badge>
</template> <lay-badge v-else-if="data.status == 1" theme="orange">处理中</lay-badge>
<lay-badge v-else-if="data.status == 2">发放中</lay-badge>
<lay-badge v-else-if="data.status == 3" theme="blue">发放完成</lay-badge>
<lay-badge v-else-if="data.status == -1">发放失败</lay-badge>
<lay-badge v-else theme="orange">状态异常</lay-badge>
</template>
<template v-slot:pay_time="{ data }">
{{ data.pay_time != null ? data.pay_time : '--' }}
</template>
</lay-table> </lay-table>
</template> </template>
<script> <script lang="ts" setup>
import { ref, watch } from 'vue' import { ref } from 'vue'
export default { const columns4 = [
setup() { {
fixed: 'left',
type: 'checkbox'
},
{
title: 'ID',
key: 'id',
width: '50px',
align: 'center'
},
{
title: '订单编号',
key: 'order_no',
width: '120px',
align: 'center',
ellipsisTooltip: true
},
{
title: '姓名',
key: 'name',
width: '120px',
align: 'center',
customSlot: 'name',
ellipsisTooltip: true
},
{
title: '身份证号码',
key: 'idcard',
width: '120px',
align: 'center',
customSlot: 'idcard',
ellipsisTooltip: true
},
{
title: '手机号码',
key: 'phone',
width: '120px',
align: 'center',
customSlot: 'phone',
ellipsisTooltip: true
},
{
title: '银行名称',
key: 'bank_name',
width: '120px',
align: 'center',
customSlot: 'bank_name',
ellipsisTooltip: true
},
{
title: '银行卡号',
key: 'bank_no',
width: '120px',
align: 'center',
customSlot: 'bank_no',
ellipsisTooltip: true
},
{
title: '支付宝账号',
key: 'alipay_account',
width: '120px',
align: 'center',
customSlot: 'alipay_account',
ellipsisTooltip: true
},
{
title: '结算金额（元）',
width: '120px',
key: 'money',
align: 'center',
ellipsisTooltip: true
},
{
title: '服务费（元）',
width: '100px',
key: 'service_charge',
align: 'center'
},
{
title: '申请时间',
width: '140px',
key: 'created_at',
align: 'center',
ellipsisTooltip: true
},
const selectedKeys5 = ref(['1']) {
const checkbox5 = ref(true) title: '发放状态',
const defaultToolbar5 = ref(true) width: '120px',
key: 'status',
const page5 = { align: 'center',
total: 100, customSlot: 'status'
limit: 10, },
current: 1 {
title: '发放时间',
width: '120px',
key: 'pay_time',
align: 'center',
customSlot: 'pay_time',
ellipsisTooltip: true
} }
]
const columns5 = [ const dataSource4 = [
{ {"id":1,
title: "序号", "appid":"wpdmbzljhdfbkbpgqwiy",
fixed: "left", "garden_id":11,
type: "number", "batch_no":"22090910255151523560045140",
width: "50px", "order_no":"22090910215803185650",
}, "person_id":2,
{ "task_id":11,
title:"姓名", "money":"10.00",
fixed:"left", "service_charge":"0.01",
width:"200px", "status":0,
titleSlot: "name-title", "pay_time":null,
customSlot:"name", "created_at":"2022-09-09 11:14:49",
key:"name", "task":{
align: "left" "id":11,
}, "name":"业务推广咨询",
{ "task_no":"123"
title:"年龄", },
width: "300px", "person":{
key:"age", "id":2,
ellipsisTooltip: true, "name":"朱xx",
}, "idcard":"3304021xxxxxxxxx",
{ "phone":"13686xxxxxxxx4",
title:"备注", "bank_name":"招商银行xxxxx支行",
width: "100px", "bank_no":"621485xxxx",
key:"remark", "alipay_account":null
customSlot:"remark", }}
ellipsisTooltip: true, ]
}
,{
title:"操作",
width:"150px",
fixed:"right",
customSlot:"operator",
key:"operator"
}
]
const dataSource5 = [
{id:"1", name:"小明", age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"2", name:"小红", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"3", name:"小刚", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"4", name:"小李", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"5", name:"小柏", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"6", name:"小吉", age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
const rowClick5 = function(data) {
console.log(JSON.stringify(data))
}
const rowDoubleClick5 = function(data) {
console.log(JSON.stringify(data))
}
watch(selectedKeys5, () => {
console.log("复选框监听:" + selectedKeys5.value);
})
return {
columns5,
dataSource5,
selectedKeys5,
checkbox5,
defaultToolbar5,
rowClick5,
rowDoubleClick5,
page5
}
}
}
</script> </script>
::: :::