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

✨(component): 新增 table 组件 skin 属性, 用于切换风格, 可选参数为 row line nob, 默认为空

Browse Source
This commit is contained in:
就眠儀式 2022-07-03 23:08:04 +08:00
parent d32d0c3a79
commit fd3ca29bd0
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,7 @@ export interface LayTableProps {
cellClassName?: string | Function;
rowStyle?: string | Function;
cellStyle?: string | Function;
skin?: string;
}
const props = withDefaults(defineProps<LayTableProps>(), {
@ -296,7 +297,7 @@ props.dataSource.map((value: any) => {
<div class="layui-table-box">
<!-- 表头 -->
<div class="layui-table-header" ref="tableHeader">
<table class="layui-table" :lay-size="size">
<table class="layui-table" :lay-size="size" :lay-skin="skin">
<colgroup>
<col v-if="checkbox" class="layui-table-col-special" />
<template v-for="column in columns" :key="column">
@ -378,6 +379,7 @@ props.dataSource.map((value: any) => {
class="layui-table"
:class="{ 'layui-table-even': props.even }"
:lay-size="size"
:lay-skin="skin"
>
<colgroup>
<col v-if="checkbox" class="layui-table-col-special" />

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

@ -598,6 +598,62 @@ export default {
:::
::: title 不同风格
:::
::: demo 通过 `skin` 属性, 切换 table 风格。
<template>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" even></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns1 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "180px",
key:"password"
},{
title:"年龄",
width: "180px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
}
]
const dataSource1 = [
{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) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns1,
dataSource1,
}
}
}
</script>
:::
::: title Table 属性
:::
@ -621,6 +677,7 @@ export default {
| rowStyle | 行样式 function(row, rowIndex) | `string` `function` | -- | -- |
| cellClassName | 列类名称 function(row, column, rowIndex, columnIndex) | `string` `function` | -- | -- |
| rowClassName | 行类名称 function(row, rowIndex) | `string` `function` | -- | -- |
| skin | 风格 | `string` | -- | `line` `row` `nob` |
:::