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

Merge branch 'next' of https://gitee.com/layui/layui-vue into next

Browse Source
This commit is contained in:
lockingreal 2022-04-13 23:18:13 +08:00
commit b422ea524b
1 changed files with 55 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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` |
::: :::