ElementUI小技巧

前言：
开发项目的时候，经常会用到elementUI的框架，里面有很多组件，会多次使用，在此记录一下，以备下次使用。

一、实时远程搜索

       elementUI提供了下拉框远程搜索，请求后台获取数据并展示下拉内容。通过remote-method来实现实时发起搜索请求，需要在el-select中绑定几个属性即可。

<div class="searchTitle">请输入社区名称</div>
     <el-select  v-model="searchByName" 
       filterable 
       placeholder="请输入社区名称" 
       remote
       clearable
       @change="currentSel"
       @clear="clearCommunity"
       reserve-keyword
       :remote-method="Tolikesearch">
       <el-option
           v-for="item in community"
           :key="item.indexCode"
           :label="item.name"
           :value="item.indexCode">
        </el-option>
      </el-select>

//获取select option选中的值
currentSel(selVal) {
     this.communityCode = selVal;
        for (var i = 0; i < this.community.length; i++) {
            if(selVal == this.community[i].indexCode){
                this.selectCommunity = this.community[i].name;
                break;
             }
        }
},
clearCommunity(){
    this.selectCommunity = '';
},
//搜索发起请求 传入值为当前select输入的值
Tolikesearch(query){//根据区域名称获取海康企业信息
     this.loading = true;
          const params = {
            regionName: query,
            pageNo: '1',
            pageSize: '100'
     		};
          this.$http.get("/crm/bi/elevatorMonitor/getNodesByParams", {params}).then(res=>{
              this.loading = false;
              this.community = res.data.list;
          })
},

效果图如下：

二、table表格相关

<el-table
			:data="tableData"
			border
			:header-cell-style="{'text-align':'center'}"
    		:cell-style="{'text-align':'center'}"
			style="width: 100%;">
				<el-table-column prop="num" label="序号" width="80" type="index"></el-table-column>
				<el-table-column prop="regionPathDivision1" label="社区名称" width="180"></el-table-column>
				<el-table-column prop="regionPathDivision2" label="管理分区" width="150"></el-table-column>
				<el-table-column prop="regionPathDivision3" label="楼号" width="230"></el-table-column>
				<el-table-column prop="deviceCode" label="设备型号" width="150"></el-table-column>
				<el-table-column prop="name" label="设备名称" width="200"></el-table-column>
				<el-table-column prop="status" label="在线状态" width="100">
					<template slot-scope="scope">
						<p v-if="scope.row.status == 1">在线</p>
						<p v-if="scope.row.status == 0">不在线</p>
						<p v-if="scope.row.status == undefined">--</p>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
        				<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
      				</template>
				</el-table-column>
</el-table>
<el-pagination
                class="paginations"
                background
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-size="10"
                layout="prev, pager, next"
                :total="total">
</el-pagination>

//设备列表翻页
handleCurrentChange(val) {
	this.pageNumDevice = val;
    this.getDeviceList();
},
async getDeviceList(val) {
	const params = {
				v: "v1.0",
				type: 8008,
				startTime: startTime,
				endTime: endTime,
				pageNum: pageNum,
				pageSize: '10',
                enterpriseId: JSON.parse(window.localStorage.getItem('userInfo')).enterpriseId,
	};
	let data = await this.$http.get('/bi/elevatorMonitor/getEncodeDeviceList', { params });
	if (data && Object.keys(data).length) {
		this.tableData = data.list;
		this.total = data.total;
	}else if(Object.keys(data).length == 0){//无数据返回
		this.tableData = [];
		this.total = 0;
	}
}

效果图如下：

备注：计算时间日期的方法

function getNowFormatDate(val) {
	var date = new Date();
	var seperator1 = "-";
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var strDate = date.getDate();
	if (month >= 1 && month <= 9) {
		month = "0" + month;
	}
	if (strDate >= 0 && strDate <= 9) {
		strDate = "0" + strDate;
	}
	var currentdate = year + seperator1 + month + seperator1 + strDate;
	return currentdate;
}