前端（二）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"
                                      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;
        }

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

三、总结

? ? ? ? 前端就是做画面的，应该什么逻辑都不要有，而不是看一些逻辑前后端谁做会省力，不过看我们这边的前端部门，做的大了之后还是不可避免的会有一些逻辑，只能说尽量保持纯净吧。