提交 2a900e41 authored 作者: 王鹏飞's avatar 王鹏飞

新增TableList footer slot

上级 d6433621
...@@ -47,6 +47,9 @@ ...@@ -47,6 +47,9 @@
</el-table> </el-table>
</div> </div>
<div class="table-list-ft"> <div class="table-list-ft">
<div>
<slot name="footer"></slot>
</div>
<el-pagination <el-pagination
class="table-list-pagination" class="table-list-pagination"
layout="total, prev, pager, next, sizes, jumper" layout="total, prev, pager, next, sizes, jumper"
...@@ -188,6 +191,9 @@ export default { ...@@ -188,6 +191,9 @@ export default {
flex: 1; flex: 1;
} }
.table-list-ft { .table-list-ft {
display: flex;
align-items: center;
justify-content: space-between;
} }
.table-list-pagination { .table-list-pagination {
padding: 10px 0; padding: 10px 0;
......
<template> <template>
<div class="ads page_container"> <div class="ads page_container">
<table-list v-bind="tableOptions" ref="tableList"> <table-list v-bind="tableOptions" ref="tableList" @selection-change="handleSelectionChange">
<template #header-aside> <template #header-aside>
<el-button type="primary" size="mini" @click="handleCreate">新建广告</el-button> <el-button type="primary" size="mini" @click="handleCreate">新建广告</el-button>
</template> </template>
...@@ -34,6 +34,10 @@ ...@@ -34,6 +34,10 @@
<template v-slot:top-status="{ row }"> <template v-slot:top-status="{ row }">
<el-switch :active-value="1" :inactive-value="0" v-model="row.is_top"></el-switch> <el-switch :active-value="1" :inactive-value="0" v-model="row.is_top"></el-switch>
</template> </template>
<template #footer>
<el-button size="mini" :disabled="!multipleSelection.length" @click="handleRemove">删除</el-button>
</template>
</table-list> </table-list>
<el-drawer :visible.sync="drawerVisible" size="1100px" :destroy-on-close="true"> <el-drawer :visible.sync="drawerVisible" size="1100px" :destroy-on-close="true">
<template slot="title"> <template slot="title">
...@@ -92,7 +96,8 @@ export default { ...@@ -92,7 +96,8 @@ export default {
details: {} details: {}
}, },
drawItem: '', drawItem: '',
dialogVisible: false dialogVisible: false,
multipleSelection: []
} }
}, },
computed: { computed: {
...@@ -128,6 +133,7 @@ export default { ...@@ -128,6 +133,7 @@ export default {
} }
], ],
columns: [ columns: [
{ type: 'selection' },
{ prop: 'image_url', label: '图片', slots: 'image' }, { prop: 'image_url', label: '图片', slots: 'image' },
{ prop: 'id', label: '广告ID', slots: 'table-id' }, { prop: 'id', label: '广告ID', slots: 'table-id' },
{ prop: 'title', label: '标题' }, { prop: 'title', label: '标题' },
...@@ -162,6 +168,12 @@ export default { ...@@ -162,6 +168,12 @@ export default {
this.$message.success('更改状态成功') this.$message.success('更改状态成功')
}) })
}, },
// 选择
handleSelectionChange(value) {
this.multipleSelection = value
},
// 删除
handleRemove() {},
handleCreate() { handleCreate() {
this.drawFormOptions.type = 'create' this.drawFormOptions.type = 'create'
this.drawerVisible = true this.drawerVisible = true
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论