feat(table): 新增 toolbar 插槽, 支持自定义工具栏
This commit is contained in:
parent
08a2ca219d
commit
b9943cc264
@ -122,3 +122,64 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-table :columns="columns" :dataSource="dataSource">
|
||||||
|
<template v-slot:toolbar>
|
||||||
|
<lay-button>新增</lay-button>
|
||||||
|
<lay-button>删除</lay-button>
|
||||||
|
</template>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
:::
|
@ -5,6 +5,11 @@
|
|||||||
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
||||||
>
|
>
|
||||||
<div class="layui-table-tool">
|
<div class="layui-table-tool">
|
||||||
|
<div class="layui-table-tool-temp">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<slot name="toolbar"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="layui-table-tool-self">
|
<div class="layui-table-tool-self">
|
||||||
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
|
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
|
||||||
<i class="layui-icon layui-icon-cols"></i>
|
<i class="layui-icon layui-icon-cols"></i>
|
||||||
@ -71,7 +76,6 @@
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
<template v-for="column in columns" :key="column">
|
<template v-for="column in columns" :key="column">
|
||||||
|
|
||||||
<template v-if="column.customSlot">
|
<template v-if="column.customSlot">
|
||||||
<td>
|
<td>
|
||||||
<div
|
<div
|
||||||
@ -100,7 +104,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
@ -109,7 +112,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="page" class="layui-table-page">
|
<div v-if="page" class="layui-table-page">
|
||||||
<lay-page :total="page.total" :limit="page.limit" @jump="change" showPage showLimit showSkip></lay-page>
|
<lay-page
|
||||||
|
:total="page.total"
|
||||||
|
:limit="page.limit"
|
||||||
|
@jump="change"
|
||||||
|
showPage
|
||||||
|
showLimit
|
||||||
|
showSkip
|
||||||
|
></lay-page>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user