xiaowen
/
LittleBeePlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1

Browse Source
master
bibi 3 years ago
parent 87a95f5a7e
commit 99a17d532c
5 changed files with 197 additions and 11 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>saas平台</title> <title>智慧小区平台</title>
</head> </head>
<body> <body>
<noscript> <noscript>

49
src/components/table/index.vue
Unescape View File

@ -1,28 +1,46 @@
<template> <template>
<div class="main"> <div class="main">
<div style="margin-bottom: 16px"> <div style="margin-bottom: 16px">
<a-button type="primary" :disabled="!hasSelected" :loading="loading"> <!-- 批量操作 -->
<a-select
type="primary"
:disabled="!hasSelected"
:loading="loading"
style="width: 120px"
@change="Actions"
placeholder="请选择操作"
>
批量 批量
</a-button> <a-select-option v-for="item in ActionsList" :key="item.value">
{{ item.label }}
</a-select-option>
</a-select>
<span style="margin-left: 8px"> <span style="margin-left: 8px">
<template v-if="hasSelected"> <template v-if="hasSelected">
{{ `已选择 ${selectedRowKeys.length} 条` }} {{ `已选择 ${selectedRowKeys.length} 条` }}
</template> </template>
</span> </span>
</div> </div>
<!-- 表格 -->
<a-table <a-table
:columns="columns" :columns="columns"
:data-source="tableData" :data-source="tableData"
:pagination="pagination" :pagination="pagination"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :scroll="{ x: 1300 }"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: selectionChoosed,
}"
:row-key=" :row-key="
(record, index) => { (record, index) => {
return index; return index;
} }
" "
> >
<!-- <a slot="del" slot-scope="scope" @click="del(scope)">删除</a> <!-- 外头传进来的操作栏信息，data为表格循环出来的当前行数据信息 -->
<span slot="formatter" slot-scope="scope" >{{scope}}</span> --> <span slot="action" slot-scope="text, record">
<slot name="actionBox" :data="record"></slot>
</span>
</a-table> </a-table>
</div> </div>
</template> </template>
@ -31,31 +49,42 @@
export default { export default {
data() { data() {
return { return {
// 表格分页
pagination: { pagination: {
current: 1,
total: 0,
pageSize: 10,
showTotal: (total) => `共 ${total} 条`, showTotal: (total) => `共 ${total} 条`,
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
}, },
loading: false, loading: false,
// 选择的index
selectedRowKeys: [], selectedRowKeys: [],
}; };
}, },
computed: { computed: {
// 是否选择selection
hasSelected() { hasSelected() {
return this.selectedRowKeys.length > 0; return this.selectedRowKeys.length > 0;
}, },
}, },
// 组件属性
props: { props: {
columns: Array, columns: Array,
tableData: Array, tableData: Array,
ActionsList: Array,
}, },
methods: { methods: {
onSelectChange(selectedRowKeys) { // 选择selection
console.log('selectedRowKeys changed: ', selectedRowKeys); selectionChoosed(selectedRowKeys, data) {
this.selectedRowKeys = selectedRowKeys; this.selectedRowKeys = selectedRowKeys;
this.$emit("selectionChoosed", data);
},
// 页码切换
handleTableChange(val) {
this.$emit("handleTableChange", val);
},
// 功能
Actions(val) {
this.$emit("Actions", val);
}, },
}, },
}; };

1
src/views/Manage/CustomerList/index.vue
Unescape View File

@ -166,6 +166,7 @@ export default {
console.log(pagination); console.log(pagination);
const pager = { ...this.pagination }; const pager = { ...this.pagination };
pager.current = pagination.current; pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager; this.pagination = pager;
}, },
}, },

1
src/views/Manage/SettleRequestManage/index.vue
Unescape View File

@ -167,6 +167,7 @@ export default {
console.log(pagination); console.log(pagination);
const pager = { ...this.pagination }; const pager = { ...this.pagination };
pager.current = pagination.current; pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager; this.pagination = pager;
}, },
}, },

155
src/views/Manage/VillageManage/index.vue
Unescape View File

@ -0,0 +1,155 @@
<template>
<div>
<commonTable
:columns="columns"
:tableData="tableData"
:ActionsList="ActionsList"
@handleTableChange="handleTableChange"
@Actions="Actions"
@selectionChoosed="selectionChoosed"
>
<template v-slot:actionBox="data">
<a href="javascript:;" @click="del(data)">del</a>
<span style="margin: 5px">|</span>
<a href="javascript:;">detail</a>
</template>
</commonTable>
</div>
</template>
<script>
export default {
data() {
return {
tableChoosed: [],
// 分页
pagination: {
current: 1,
total: 0,
pageSize: 10,
},
// 列
columns: [
{
title: "Name",
dataIndex: "name",
width: "200",
},
{
title: "Gender",
dataIndex: "gender",
width: "200",
customRender: function (gender) {
if (gender === 1) {
return "是";
} else {
return "否";
}
},
},
{
title: "Gender1",
dataIndex: "gender1",
width: "200",
},
{
title: "Gender2",
dataIndex: "gender2",
width: "200",
},
{
title: "Gender3",
dataIndex: "gender3",
width: "200",
},
{
title: "Gender4",
dataIndex: "gender4",
width: "200",
},
{
title: "Gender5",
dataIndex: "gender5",
width: "200",
},
{
title: "Gender6",
dataIndex: "gender6",
width: "200",
},
{
title: "status",
dataIndex: "status",
width: "200",
},
{
title: "操作",
dataIndex: "action",
key: "action",
width: "180",
fixed: "right",
scopedSlots: { customRender: "action" },
},
],
// 数据
tableData: [
{ name: 1, gender: 1 },
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
],
ActionsList: [
{
label: "批量删除",
value: 1,
},
{
label: "批量导出",
value: 2,
},
],
};
},
methods: {
handleTableChange(pagination) {
console.log(pagination);
const pager = { ...this.pagination };
pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager;
},
del(data) {
console.log(data);
},
Actions(data) {
console.log(data);
},
selectionChoosed(data) {
console.log(data);
this.tableChoosed = data
},
},
};
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save