微信截图_20190425170144.png
首先需要安装element，并且引入。
//main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
下面是主要代码
<template>
<div id="app">
<div class="old-customers-list">
<el-button type="primary" @click="setPassword">打开弹窗</el-button>
<el-dialog
:visible.sync="apDialogVisible"
title="批量添加管家密码"
width="80%"
>
<div>① 请选择需下发管家密码的门锁（已选择 {{ selectedData.length }} 个）</div>
<el-table
ref="multipleTable"
:data="ap_list"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column type="selection" :reserve-selection="true" prop="id"></el-table-column>
<el-table-column prop="lock_name" label="锁名称"></el-table-column>
<el-table-column prop="room_status" label="房间状态"></el-table-column>
<el-table-column prop="room_contract_status" label="房间合同状态"></el-table-column>
<el-table-column prop="password_status" label="管家密码状态"></el-table-column>
</el-table>
<el-row class="top-margin">
<el-pagination
:current-page.sync="apObj.page_index"
:page-size="apObj.page_size"
:total="apObj.aptotal"
layout="total, prev, pager, next"
style="float:right;"
>
</el-pagination>
</el-row>
</el-dialog>
</div>
</div>
</template>
<script>
import Data from "./js/data.json";
export default {
data() {
return {
apDialogVisible: false,
ap_list: [],
apObj: {
page_index: 1,
page_size: 10,
aptotal: Data.length,
},
// 获取row的key值
getRowKeys(row) {
return row.id;
},
selectedData: []
}
},
watch: {
"apObj.page_index": {
handler(newVal, oldVal) {
this.ap_list = Data.slice((newVal - 1)*10, (newVal - 1)*10 + 10);
}
}
},
methods: {
handleSelectionChange(rows) {
this.selectedData = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.selectedData.push(row);
}
});
}
},
setPassword() {
this.apDialogVisible = true;
this.apObj.page_index = 1;
this.ap_list = Data.slice(0, 10);
this.$nextTick(() => {
this.$refs.multipleTable.clearSelection();
});
},
},
}
</script>
其中数据是存在同级js文件夹下的data.json文件。
[
{
"id": 1,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 2,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 3,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 4,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 5,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 6,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 7,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 8,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 9,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 10,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 11,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 12,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 13,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 14,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 15,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 16,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 17,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 18,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 19,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 20,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 21,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 22,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 23,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 24,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 25,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 26,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
},
{
"id": 27,
"lock_name": "1栋101",
"room_status": "空闲可租",
"room_contract_status": "",
"password_status": ""
},
{
"id": 28,
"lock_name": "1栋102",
"room_status": "已预订",
"room_contract_status": "待执行",
"password_status": "已失效"
},
{
"id": 29,
"lock_name": "1栋106",
"room_status": "已锁定",
"room_contract_status": "",
"password_status": "已失效"
},
{
"id": 30,
"lock_name": "1栋107",
"room_status": "空闲可租",
"room_contract_status": "编制中",
"password_status": "使用中"
},
{
"id": 31,
"lock_name": "1栋108",
"room_status": "空闲可租",
"room_contract_status": "已关闭",
"password_status": "已失效"
}
]
网友评论