就眠儀式
Gitee
commit
9c9c31d70f
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayRate"
|
||||
name: "LayRate",
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -83,14 +83,12 @@ const action = function (index: number, event: any) {
|
||||
};
|
||||
|
||||
// 清除评分图标
|
||||
const showClearIcon = computed(
|
||||
() => !props.readonly && props.hasClear
|
||||
);
|
||||
const showClearIcon = computed(() => !props.readonly && props.hasClear);
|
||||
const clearRate = function () {
|
||||
tempValue.value = 0;
|
||||
currentValue.value = 0;
|
||||
emit("clear", currentValue.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -131,7 +129,11 @@ const clearRate = function(){
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="showClearIcon">
|
||||
<i :class="['layui-icon', 'layui-rate-clear-icon', clearIcon]" @click="clearRate" title="清除评分"></i>
|
||||
<i
|
||||
:class="['layui-icon', 'layui-rate-clear-icon', clearIcon]"
|
||||
@click="clearRate"
|
||||
title="清除评分"
|
||||
></i>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,10 +9,11 @@
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.layui-table tr {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.layui-table th {
|
||||
@ -55,7 +56,7 @@
|
||||
.layui-table td,
|
||||
.layui-table th {
|
||||
position: relative;
|
||||
padding: 9px 15px;
|
||||
padding: 9px 8px;
|
||||
min-height: 20px;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
@ -105,6 +106,7 @@
|
||||
.layui-table-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.layui-table-view .layui-table {
|
||||
@ -236,9 +238,16 @@
|
||||
|
||||
.layui-table-cell,
|
||||
.layui-table-tool-panel li {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
}
|
||||
.layui-table-call-ellipsis{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-table-tool-panel li {
|
||||
@ -355,6 +364,29 @@
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin-bottom: -1px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
background-clip: padding-box;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track:hover {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-table-body .layui-none {
|
||||
|
||||
@ -13,6 +13,7 @@ import LayDropdown from "../dropdown/index.vue";
|
||||
import LayPage from "../page/index.vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import "./index.less";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
|
||||
const tableId = uuidv4();
|
||||
|
||||
@ -275,7 +276,8 @@ onMounted(() => {
|
||||
class="layui-table-cell"
|
||||
:style="{
|
||||
textAlign: column.align,
|
||||
flex: column.width ? '0 0 ' + column.width : '1',
|
||||
width: column.width ? column.width : '0',
|
||||
minWidth: column.minWidth ? column.minWidth : '47px',
|
||||
}"
|
||||
>
|
||||
<span>
|
||||
@ -340,10 +342,31 @@ onMounted(() => {
|
||||
class="layui-table-cell"
|
||||
:style="{
|
||||
textAlign: column.align,
|
||||
flex: column.width ? '0 0 ' + column.width : '1',
|
||||
width: column.width ? column.width : '0',
|
||||
minWidth: column.minWidth
|
||||
? column.minWidth
|
||||
: '47px',
|
||||
whiteSpace: column.ellipsisTooltip
|
||||
? 'nowrap'
|
||||
: 'normal',
|
||||
}"
|
||||
>
|
||||
<slot :name="column.customSlot" :data="data"></slot>
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
>
|
||||
<div class="layui-table-call-ellipsis">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
></slot>
|
||||
</div>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
></slot>
|
||||
</td>
|
||||
</template>
|
||||
<!-- 匹 配 Column -->
|
||||
@ -353,10 +376,24 @@ onMounted(() => {
|
||||
class="layui-table-cell"
|
||||
:style="{
|
||||
textAlign: column.align,
|
||||
flex: column.width ? '0 0 ' + column.width : '1',
|
||||
width: column.width ? column.width : '0',
|
||||
minWidth: column.minWidth
|
||||
? column.minWidth
|
||||
: '47px',
|
||||
whiteSpace: column.ellipsisTooltip
|
||||
? 'nowrap'
|
||||
: 'normal',
|
||||
}"
|
||||
>
|
||||
<span> {{ data[column.key] }} </span>
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
>
|
||||
<div class="layui-table-call-ellipsis">
|
||||
{{ data[column.key] }}
|
||||
</div>
|
||||
</lay-tooltip>
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -35,12 +35,16 @@ export default {
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource1 = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
|
||||
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
|
||||
]
|
||||
|
||||
return {
|
||||
@ -256,26 +260,34 @@ export default {
|
||||
},{
|
||||
title:"密码",
|
||||
customSlot:"password",
|
||||
width:"200px",
|
||||
key:"password",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
width: "200px",
|
||||
key:"age",
|
||||
sort: true,
|
||||
align: "right"
|
||||
},
|
||||
{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true,
|
||||
}
|
||||
,{
|
||||
title:"操作",
|
||||
width:"100px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource5 = [
|
||||
{id:"1", username:"root", age:"18"},
|
||||
{id:"2", username:"woow", age:"20"}
|
||||
{id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
|
||||
{id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
|
||||
]
|
||||
|
||||
const rowClick5 = function(data) {
|
||||
@ -358,9 +370,11 @@ export default {
|
||||
| key | 数据字段 | -- | -- | -- |
|
||||
| customSlot | 自定义插槽 | -- | -- | -- |
|
||||
| width | 宽度 | -- | -- | -- |
|
||||
| minWidth | 最小宽度 | -- | -- | -- |
|
||||
| sort | 排序 | -- | -- | -- |
|
||||
| titleSlot | 标题插槽 | -- | -- | -- |
|
||||
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
|
||||
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user