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

docs: 更新 table.md 文档

Browse Source
This commit is contained in:
就眠儀式 2022-04-13 23:09:34 +08:00
parent f3d29a3711
commit 1601fdb865
3 changed files with 103 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,31 +251,35 @@ onMounted(() => {
</div> </div>
</th> </th>
<template v-for="column in columns" :key="column"> <template v-for="column in columns" :key="column">
<th class="layui-table-cell" :style="{ width: column.width, textAlign: column.align }" v-if="tableColumnKeys.includes(column.key)"> <th
<span> class="layui-table-cell"
<template v-if="column.titleSlot"> :style="{ width: column.width, textAlign: column.align }"
<slot :name="column.titleSlot"></slot> v-if="tableColumnKeys.includes(column.key)"
</template> >
<template v-else> <span>
{{ column.title }} <template v-if="column.titleSlot">
</template> <slot :name="column.titleSlot"></slot>
</span> </template>
<span <template v-else>
v-if="column.sort" {{ column.title }}
class="layui-table-sort layui-inline" </template>
lay-sort="" </span>
> <span
<i v-if="column.sort"
@click.stop="sortTable($event, column.key, 'asc')" class="layui-table-sort layui-inline"
class="layui-edge layui-table-sort-asc" lay-sort=""
title="升序" >
></i> <i
<i @click.stop="sortTable($event, column.key, 'asc')"
@click.stop="sortTable($event, column.key, 'desc')" class="layui-edge layui-table-sort-asc"
class="layui-edge layui-table-sort-desc" title="升序"
title="降序" ></i>
></i> <i
</span> @click.stop="sortTable($event, column.key, 'desc')"
class="layui-edge layui-table-sort-desc"
title="降序"
></i>
</span>
</th> </th>
</template> </template>
</tr> </tr>
@ -309,11 +313,14 @@ onMounted(() => {
<template v-if="tableColumnKeys.includes(column.key)"> <template v-if="tableColumnKeys.includes(column.key)">
<!-- 插 槽 Column --> <!-- 插 槽 Column -->
<template v-if="column.customSlot"> <template v-if="column.customSlot">
<td class="layui-table-cell" :style="{ <td
width: column.width, class="layui-table-cell"
textAlign: column.align, :style="{
}"> width: column.width,
<slot :name="column.customSlot" :data="data"></slot> textAlign: column.align,
}"
>
<slot :name="column.customSlot" :data="data"></slot>
</td> </td>
</template> </template>
<!-- 匹 配 Column --> <!-- 匹 配 Column -->
@ -322,11 +329,15 @@ onMounted(() => {
v-for="(value, key) in data" v-for="(value, key) in data"
:key="value" :key="value"
> >
<td v-if="column.key == key" class="layui-table-cell" :style="{ <td
width: column.width, v-if="column.key == key"
textAlign: column.align, class="layui-table-cell"
}"> :style="{
<span> {{ value }} </span> width: column.width,
textAlign: column.align,
}"
>
<span> {{ value }} </span>
</td> </td>
</template> </template>
</template> </template>

3
package/document/src/components/LayAnchor.vue
View File

@ -123,7 +123,8 @@ onMounted(() => {
scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500)); scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
// 如果已折叠,关闭组件初始渲染时的动画,然后自动开启 // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
// @ts-ignore // @ts-ignore
show.value = scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px"; show.value =
scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
enableAnimation = show.value; enableAnimation = show.value;
}); });

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

@ -13,14 +13,7 @@
::: demo 使用 `lay-table` 标签, 创建表格 ::: demo 使用 `lay-table` 标签, 创建表格
<template> <template>
<lay-table :columns="columns" :dataSource="dataSource"> <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button size="xs">修改</lay-button>
<lay-button size="xs" type="primary">删除</lay-button>
</template>
</lay-table>
</template> </template>
<script> <script>
@ -29,37 +22,30 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const columns = [ const columns1 = [
{ {
title:"账户", title:"账户",
width:"200px", width:"200px",
slot:"username",
key:"username" key:"username"
},{ },{
title:"密码", title:"密码",
width: "180px", width: "180px",
slot:"password",
key:"password" key:"password"
},{ },{
title:"年龄", title:"年龄",
width: "180px", width: "180px",
key:"age" key:"age"
},{
title:"操作",
width: "180px",
customSlot:"operator",
key:"operator"
} }
] ]
const dataSource = [ const dataSource1 = [
{username:"root", password:"root", age:"18"}, {username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"} {username:"woow", password:"woow", age:"20"}
] ]
return { return {
columns, columns1,
dataSource dataSource1
} }
} }
} }
@ -73,14 +59,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-table :columns="columns" :dataSource="dataSource" size="lg"> <lay-table :columns="columns2" :dataSource="dataSource2" :size="size2"></lay-table>
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button size="xs">修改</lay-button>
<lay-button size="xs" type="primary">删除</lay-button>
</template>
</lay-table>
</template> </template>
<script> <script>
@ -89,37 +68,33 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const columns = [ const columns2 = [
{ {
title:"账户", title:"账户",
width:"200px", width:"200px",
slot:"username",
key:"username" key:"username"
},{ },{
title:"密码", title:"密码",
width: "180px", width: "180px",
slot:"password",
key:"password" key:"password"
},{ },{
title:"年龄", title:"年龄",
width: "180px", width: "180px",
key:"age" key:"age"
},{
title:"操作",
width: "180px",
customSlot:"operator",
key:"operator"
} }
] ]
const dataSource = [ const dataSource2 = [
{username:"root", password:"root", age:"18"}, {username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"} {username:"woow", password:"woow", age:"20"}
] ]
const size2 = ref('md');
return { return {
columns, size2,
dataSource columns2,
dataSource2
} }
} }
} }
@ -133,14 +108,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-table :columns="columns" :dataSource="dataSource" :page="page" @change="change"> <lay-table :columns="columns3" :dataSource="dataSource3" :page="page3" @change="change3"></lay-table>
<template v-slot:username="{ data }"> {{data.username}} </template>
<template v-slot:password="{ data }"> {{data.password}} </template>
<template v-slot:operator="{ data }">
<lay-button size="xs">修改</lay-button>
<lay-button size="xs" type="primary">删除</lay-button>
</template>
</lay-table>
</template> </template>
<script> <script>
@ -149,17 +117,17 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const page = { const page3 = {
total: 100, total: 100,
limit: 10, limit: 10,
current: 2 current: 2
} }
const change = function({ current }){ const change3 = function({ current }){
console.log("当前页:" + JSON.stringify(current)) console.log("当前页:" + JSON.stringify(current))
} }
const columns = [ const columns3 = [
{ {
title:"账户", title:"账户",
width:"200px", width:"200px",
@ -174,24 +142,19 @@ export default {
title:"年龄", title:"年龄",
width: "180px", width: "180px",
key:"age" key:"age"
},{
title:"操作",
width: "180px",
customSlot:"operator",
key:"operator"
} }
] ]
const dataSource = [ const dataSource3 = [
{username:"root", password:"root", age:"18"}, {username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"} {username:"woow", password:"woow", age:"20"}
] ]
return { return {
page, page3,
change, change3,
columns, columns3,
dataSource dataSource3
} }
} }
} }
@ -206,7 +169,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-table :columns="columns1" :dataSource="dataSource1"></lay-table> <lay-table :columns="columns4" :dataSource="dataSource4"></lay-table>
</template> </template>
<script> <script>
@ -215,7 +178,7 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const columns1 = [ const columns4 = [
{ {
title:"姓名", title:"姓名",
width:"200px", width:"200px",
@ -228,7 +191,7 @@ export default {
} }
] ]
const dataSource1 = [ const dataSource4 = [
{name:"张三", score:100}, {name:"张三", score:100},
{name:"李四", score:80}, {name:"李四", score:80},
{name:"王二", score:99}, {name:"王二", score:99},
@ -238,10 +201,8 @@ export default {
] ]
return { return {
page, columns4,
change, dataSource4
columns,
dataSource
} }
} }
} }
@ -255,7 +216,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys" :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick"> <lay-table :columns="columns5" id="id" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
<template v-slot:toolbar> <template v-slot:toolbar>
<lay-button size="sm">新增</lay-button> <lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button> <lay-button size="sm">删除</lay-button>
@ -276,11 +237,11 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const selectedKeys = ref(['1']) const selectedKeys5 = ref(['1'])
const checkbox = ref(true) const checkbox5 = ref(true)
const defaultToolbar = ref(true) const defaultToolbar5 = ref(true)
const columns = [ const columns5 = [
{ {
title:"账户", title:"账户",
width:"200px", width:"200px",
@ -308,27 +269,27 @@ export default {
} }
] ]
const dataSource = [ const dataSource5 = [
{id:"1", username:"root", password:"root", age:"18"}, {id:"1", username:"root", password:"root", age:"18"},
{id:"2", username:"woow", password:"woow", age:"20"} {id:"2", username:"woow", password:"woow", age:"20"}
] ]
const rowClick = function(data) { const rowClick5 = function(data) {
console.log(JSON.stringify(data)) console.log(JSON.stringify(data))
} }
const rowDoubleClick = function(data) { const rowDoubleClick5 = function(data) {
console.log(JSON.stringify(data)) console.log(JSON.stringify(data))
} }
return { return {
columns, columns5,
dataSource, dataSource5,
selectedKeys, selectedKeys5,
checkbox, checkbox5,
defaultToolbar, defaultToolbar5,
rowClick, rowClick5,
rowDoubleClick rowDoubleClick5
} }
} }
} }
@ -345,11 +306,11 @@ export default {
| -------------------- | ----------------------------- | ---- | ------ | -------------- | | -------------------- | ----------------------------- | ---- | ------ | -------------- |
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- | | columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- | | dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复选框 | -- | -- | -- | | checkbox | 开启复选框 | `boolean` | `false` | `true` `false` |
| id | 主键 | -- | -- | -- | | id | 主键 | `string` | -- | -- |
| v-model:selectedKeys | 选中项 | -- | -- | -- | | v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | -- | -- | -- | | default-toolbar | 工具栏 | `boolean` | `false` | `true` `false` |
| size | 尺寸 | -- | -- | `lg` `md` `sm` | | size | 尺寸 | `string` | `md` | `lg` `md` `sm` |
::: :::
@ -383,14 +344,15 @@ export default {
::: table ::: table
| 插槽 | 描述 | 默认 | | 插槽 | 描述 | 类型 | 默认值 | 可选值 |
| ---------- | ---------- | ---- | | ---------- | ---------- | ---- |---- |---- |
| title | 列标题 | -- | | title | 列标题 | -- |-- |-- |
| key | 数据字段 | -- | | key | 数据字段 | -- |-- |-- |
| customSlot | 自定义插槽 | -- | | customSlot | 自定义插槽 | -- |-- |-- |
| width | 宽度 | -- | | width | 宽度 | -- |-- |-- |
| sort | 排序 | -- | | sort | 排序 | -- |-- |-- |
| titleSlot | 标题插槽 | -- | | titleSlot | 标题插槽 | -- |-- |-- |
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
::: :::