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

🐛(component): 修复 table 的 scroll 宽度适应性的问题

Browse Source
This commit is contained in:
就眠儀式 2022-08-29 21:37:14 +08:00
parent 8ea3ae78b0
commit bb15a53b76
3 changed files with 663 additions and 641 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -434,6 +434,8 @@ const getScrollWidth = () => {
const offsetWidth: number = tableBody.value?.offsetWidth || 0;
if (clientWidth < offsetWidth) {
scrollWidthCell.value = offsetWidth - clientWidth;
} else {
scrollWidthCell.value = 0;
}
};

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

@ -335,56 +335,122 @@ export default {
::: demo 设置 `height` 或者 `max-height` 即可实现
<template>
<lay-table :columns="columns8" :data-source="dataSource8" size="sm" max-height="300px"></lay-table>
<lay-table
:columns="columns8"
:data-source="dataSource8"
size="sm"
max-height="300px"
>
<template v-slot:operator="{ data }">
<lay-button size="xs" @click="deleteColumn(data)">删除</lay-button>
</template>
</lay-table>
</template>
<script>
<script lang="ts" setup>
import { ref } from 'vue'
export default {
setup() {
const columns8 = [
{
title:"账户",
minWidth:"200px",
key:"username"
},{
title:"密码",
minWidth: "180px",
key:"password"
},{
title:"年龄",
minWidth: "180px",
key:"age"
},{
title:"备注",
key:"remark",
minWidth: "180px",
ellipsisTooltip: true,
}
]
const dataSource8 = [
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{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 的 桌 面 端 组 件 库.'},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
]
return {
columns8,
dataSource8
}
const deleteColumn = ({ username }) => {
const findIndex = dataSource8.value.findIndex((item) => item.username === username);
dataSource8.value.splice(findIndex, 1);
};
const columns8 = [
{
title: '账户',
minWidth: '200px',
key: 'username',
},
{
title: '密码',
minWidth: '180px',
key: 'password',
},
{
title: '年龄',
minWidth: '180px',
key: 'age',
},
{
title: "操作",
width: "200px",
customSlot: "operator",
key: "operator",
align: "center",
}
}
]
const dataSource8 = ref([
{
username: '1',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '2',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '3',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '4',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '5',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '6',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '7',
password: 'root',
age: '18',
remark: 'layui - vue（谐音：类 UI) ',
},
{
username: '8',
password: 'woow',
age: '20',
remark:
'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.',
},
{
username: '9',
password: 'woow',
age: '20',
remark:
'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.',
},
{
username: '10',
password: 'woow',
age: '20',
remark:
'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.',
},
{
username: '11',
password: 'woow',
age: '20',
remark:
'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.',
},
])
</script>
:::

1144
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff