feat(table): 新增 toolbar 插槽, 支持自定义工具栏

This commit is contained in:
就眠仪式 2021-10-11 00:57:32 +08:00
parent 08a2ca219d
commit b9943cc264
2 changed files with 77 additions and 6 deletions

View File

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

View File

@ -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>