perf(table): 新增 size 配置, 支持不同尺寸
This commit is contained in:
就眠仪式
parent
e04b53988a
commit
ba6de34bdb
@ -68,6 +68,6 @@ export default {
|
||||
::: field 容器属性
|
||||
:::
|
||||
|
||||
| Name | Description | Accepted Values |
|
||||
| Name | Description | Accepted Values |
|
||||
| ----- | ------ | -------------- |
|
||||
| fluid | 流模式 | `true` `false` |
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
::: field 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
@ -55,6 +58,69 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: field 不同尺寸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" :dataSource="dataSource" size="lg">
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
<lay-button type="primary">删除</lay-button>
|
||||
</template>
|
||||
</lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
slot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
title:"密码",
|
||||
width: "180px",
|
||||
slot:"password",
|
||||
key:"password"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "180px",
|
||||
key:"age"
|
||||
},{
|
||||
title:"操作",
|
||||
width: "180px",
|
||||
customSlot:"operator",
|
||||
key:"operator"
|
||||
}
|
||||
]
|
||||
|
||||
const dataSource = [
|
||||
{username:"root", password:"root", age:"18"},
|
||||
{username:"woow", password:"woow", age:"20"}
|
||||
]
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: field 开启分页
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
@ -123,6 +189,9 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: field 完整表格
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
@ -202,7 +271,8 @@ export default {
|
||||
| checkbox | 开启复现框 | -- |
|
||||
| id | 主键 | -- |
|
||||
| selectedKeys ( v-model ) | 选中项 | -- |
|
||||
| default-toolbar | 开启工具栏 | -- |
|
||||
| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
|
||||
| size | 尺寸 | -- |
|
||||
|
||||
::: field table slots
|
||||
|
||||
|
||||
@ -15,19 +15,20 @@
|
||||
<script setup name="LayCollapseItem" lang="ts">
|
||||
import { defineProps, inject, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
const props =
|
||||
defineProps<{
|
||||
id: string
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const openKeys = inject("openKeys") as String[]
|
||||
const openKeys = inject('openKeys') as String[]
|
||||
|
||||
const isShow = ref(openKeys.includes(props.id))
|
||||
|
||||
const showHandle = function () {
|
||||
isShow.value = !isShow.value
|
||||
if(openKeys.indexOf(props.id) != -1) {
|
||||
openKeys.splice(openKeys.indexOf(props.id),1)
|
||||
if (openKeys.indexOf(props.id) != -1) {
|
||||
openKeys.splice(openKeys.indexOf(props.id), 1)
|
||||
} else {
|
||||
openKeys.push(props.id)
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="layui-table-box">
|
||||
<div class="layui-table-header">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
|
||||
<table class="layui-table" :lay-size="size">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="checkbox" class="layui-table-col-special">
|
||||
@ -47,7 +47,7 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="layui-table-body layui-table-main">
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
|
||||
<table class="layui-table" :lay-size="size">
|
||||
<tbody>
|
||||
<template v-for="data in dataSource" :key="data">
|
||||
<tr>
|
||||
@ -64,9 +64,7 @@
|
||||
<template v-for="column in columns" :key="column">
|
||||
<template v-if="column.customSlot">
|
||||
<td class="layui-table-cell">
|
||||
<div
|
||||
:style="{ width: column.width }"
|
||||
>
|
||||
<div :style="{ width: column.width }">
|
||||
<slot :name="column.customSlot" :data="data" />
|
||||
</div>
|
||||
</td>
|
||||
@ -78,9 +76,7 @@
|
||||
:key="index"
|
||||
>
|
||||
<td class="layui-table-cell" v-if="column.key == key">
|
||||
<div
|
||||
:style="{ width: column.width }"
|
||||
>
|
||||
<div :style="{ width: column.width }">
|
||||
<span v-if="column.slot">
|
||||
<slot :name="column.slot" :data="data" />
|
||||
</span>
|
||||
@ -103,12 +99,25 @@
|
||||
show-limit
|
||||
show-skip
|
||||
@jump="change"
|
||||
/>
|
||||
>
|
||||
<template v-slot:prev
|
||||
><lay-icon type="layui-icon-left"></lay-icon
|
||||
></template>
|
||||
<template v-slot:next
|
||||
><lay-icon type="layui-icon-right"></lay-icon
|
||||
></template>
|
||||
</lay-page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="LayTable"></script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayTable',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import tableItemCheckbox from './component/checkbox.vue'
|
||||
import {
|
||||
@ -125,6 +134,7 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
skin?: string
|
||||
size?: string
|
||||
page?: Recordable
|
||||
checkbox?: boolean
|
||||
columns?: Recordable[]
|
||||
@ -139,7 +149,8 @@ const props = withDefaults(
|
||||
},
|
||||
selectedKeys: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
size: 'md',
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
import './useClickOutside.ts'
|
||||
import './useClickOutside.ts'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user