前端（二）VUE功能集锦

一、引言

作者开发工具平台的时候，用到了vue和element-ui，这里写一下各种功能使用，有的是绕点弯路，有的是需要结合实现需要自己改写一下。

二、功能

先看看环境，作者后端是SpringBoot，前端是VUE+ElementUI，前端文件直接放在esources的static里面，没有做前后端分离，毕竟这个平台是属于我们部门的，没有专门的前端人员

1、悬浮显示

有些内容比较长，需要只展示一部分，还要把鼠标悬浮的时候，展示全部内容r

html:
<el-tooltip :content="code" placement="top"><div class="ellipsis">{{ code }}</div></el-tooltip>css:.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

2、点击图标复制

html:
<el-button type="text" icon="el-icon-document-copy"
@click="copyContent(code)"></el-button>js:
copyContent(content) {const el = document.createElement('textarea');el.value = content;document.body.appendChild(el);el.select();document.execCommand('copy');document.body.removeChild(el);_this.$message.success('内容已复制');},

3、数据转换展示

有时候需要把数据转换一遍再展示，比如日期

html:
<template slot-scope="scope">{{ formatDate(scope.row.createTime) }}</template>js:
formatDate(timestamp) {const date = new Date(timestamp);return date.toLocaleDateString();},

4、文本输入框高度

试了style样式的高度设置，还有!important之类的强设置，没用

内容输入框只能使用 :rows进行设置高度或者重写组件，如果要重写就太麻烦了

<el-input placeholder="请输入" type="textarea" :rows="25"style="width: 100%;height:600px !important"size="medium"clearablev-model="createForm.content"></el-input>

5、输入或者选择事件

在用户输入或者选择一些内容的时候，需要识别到内容是什么，有时候要特殊处理，比如数据库相关展示db、表，日志相关展示标题、信息等等

选择

html：
<el-select filterable placeholder="请选择" :disabled="detailFlag || detailStepFlag"v-model="createStepForm.stepType"@change="handleStepTypeChange"><el-option :key="step.code" :label="step.name" :value="step.code"v-for="step in stepTypeList"></el-option></el-select>js：handleStepTypeChange(value) {if (_this.createStepForm.stepType === 'log') {//业务处理}
},

输入框

html：
<el-input placeholder="请输入" style="width: 200px;" size="mini" clearable@change="handleSecretChange":disabled="detailFlag || detailStepFlag"v-model="createStepForm.secretKey"></el-input>js:
handleSecretChange() {//业务处理},

6、根据输入值加载远程数据

html:
<el-selectv-model="createForm.e"multiplefilterableremote:remote-method="searchEe":loading="loadingE":options="es"placeholder="请选择"style="width: 200px;"><el-option v-for="item in es" :key="item.e" :label="item.eDesc":value="item.e"></el-option></el-select>js:
searchEmail(queryString) {_this.loadingEmail = true;// 模拟异步加载数据setTimeout(() => {let url = '/eQuery/eInfo?value=' + queryString;_this.axios.post(url).then(function (response) {if (response.data && response.data.data) {_this.es = response.data.data.map(x => {let res = {};res.e = x.e;res.eDesc = xdisName;return res;})_this.loadingEmail = false;}});}, 1000);},

7、表格内容互换

比如需要选择一些任务，点击到另外一个表格里面，把需要真正执行的任务发给后端

<el-table :data="sourceList"@row-click="handleClickChange":row-class-name="tableRowClassName":highlight-current-row="false":header-cell-style="{color: '#fff',background: '#0a3370',fontWeight: '700',}":header-fixed="true"@selection-change="moveSelectedData" style="height:300px;width: 100%;overflow: auto"><el-table-column type="selection" width="55"></el-table-column><el-table-columnlabel="序号"type="index"width="80"></el-table-column></el-table><el-row style='font-weight: bold;font-size: 18px;margin-bottom: 25px'>执行一览</el-row><el-table :data="executeList"@row-click="handleClickChange":row-class-name="tableRowClassName":highlight-current-row="false":header-cell-style="{color: '#fff',background: '#0a3370',fontWeight: '700',}":header-fixed="true"style="height:300px;width: 100%;overflow: auto"><el-table-columnlabel="序号"type="index"width="80"></el-table-column><el-table-columnlabel="操作"prop="operate"><template slot-scope="scope"><el-button type="danger" size="mini" @click="removeFromRight(scope.row)">删除</el-button></template></el-table-column></el-table>

移动到任务表格

moveSelectedData(selectedData) {console.log("moveSelectedData selectedData:" + JSON.stringify(selectedData));_this.executeList = _this.executeList.concat(selectedData);console.log("moveSelectedData executeList:" + JSON.stringify(_this.executeList));
//把原始表格这条数据删除_this.sourceList = _this.sourceList.filter(item => !selectedData.includes(item));},

如果是点错了，需要能够把任务表格的数据删除，这里的删除也不是真的删除，是把数据放回原始表格

removeFromRight(row) {const index = _this.executeList.findIndex(data => data.code === row.code);if (index !== -1) {_this.executeList.splice(index, 1);_this.sourceList.push(row);}},

8、表格样式

表格如果光秃秃的直接用组件，也不好看，所以需要修改一下样式，上面作者的表格也能看的html里面的一些样式

css

.el-table,.el-table__expanded-cell {background-color: transparent;color: #93dcfe;font-size: 20px;}.el-table th,.el-table tr,.el-table td {background-color: transparent;border: 0px;color: #93dcfe;font-size: 16px;height: 5px;font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;font-weight: Normal;}.el-table::before {height: 0px;}.el-table__body tr,.el-table__body td {padding: 0;height: 12px;}.el-table tbody tr:hover > td {background: #063570 !important;}.el-table__header-wrapper {border: solid 1px #04c2ed;}.el-table__row.warning-row {background: #063570;}.el-table__body-wrapper::-webkit-scrollbar-track {background-color: #063570;}.el-table__body-wrapper::-webkit-scrollbar {width: 10px;opacity: 0.5;}.el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 12px;background-color: #0257aa;}

看看效果呢，鼠标放上去还会变色的