前端（二）VUE功能集锦

一、引言

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

二、功能

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

1、悬浮显示

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

html:

  
{{ code }}
 


css:

        .ellipsis {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

2、点击图标复制

html:


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:



js:
formatDate(timestamp) {
                    const date = new Date(timestamp);
                    return date.toLocaleDateString();
                },

4、文本输入框高度

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

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

5、输入或者选择事件

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

选择

html：

                                
                                
                            

js：

handleStepTypeChange(value) {
   if (_this.createStepForm.stepType === 'log') {
        //业务处理
  }
},

输入框 

html：



js:
handleSecretChange() {
                    //业务处理
                },

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

html:

                            
                        


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、表格内容互换 

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

                        
                        
                        
                    
                    执行一览
                    
                        
                        
                        
                            
                        
                    

        移动到任务表格

                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;
        }

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

三、总结

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