一、引言
作者开发工具平台的时候，用到了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"
clearable
v-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-select
v-model="createForm.e"
multiple
filterable
remote
: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-column
label="序号"
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-column
label="序号"
type="index"
width="80">
</el-table-column>
<el-table-column
label="操作"
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;
}
看看效果呢 ，鼠标放上去还会变色的
三、总结
前端就是做画面的，应该什么逻辑都不要有，而不是看一些逻辑前后端谁做会省力，不过看我们这边的前端部门，做的大了之后还是不可避免的会有一些逻辑，只能说尽量保持纯净吧。
