番外篇：element UI 使用情况记录

一：ElementUI2.0表格el-table：自适应高度

需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

//在data中设置一个tableHeight，其中x是根据你布局自己算出来的值，也可以换成动态监测的值
<template>
  <el-table
    :data="tableData3"
    :height="tableHeight"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
  </el-table>
</template>

data(){
  return{
    tableHeight: window.innerHeight - x
  }
}

 

二：element UI 的row-click事件如何使用参数？

1 <template>
 2   <el-table
 3     :data="tableData"
 4     stripe
 5     @row-click="handdle"
 6     style="width: 100%">
 7     <el-table-column
 8       prop="date"
 9       label="日期"
10       width="180">
11     </el-table-column>
12   </el-table>
13 </template>
14 
15 <script>
16   export default {
17     data() {
18       return {
19         tableData: []
20       }
21     }，
22     methods: {
23       handle(row, event, column) {
24           console.log(row, event, column)
25        }
26     }
27   }
28 </script>

3. 在 Element-UI 的 Table 组件上添加列拖拽效果

https://www.cnblogs.com/wisewrong/p/8820508.html  最终实现代码

<!--
在 ele ui table的 基础上 增加 列拖拽 功能

-->
<template>
        <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
            <el-table :data="data"
            :border="option.border"
            :height="option.height"
            :max-height="option.maxHeight"
            :style="{ width: parseInt(option.width)+'px' }"
            :cell-class-name="cellClassName" 
            :header-cell-class-name="headerCellClassName"
            >
            <slot name="fixed"></slot>
            <el-table-column v-for="(col, index) in tableHeader" :key="index"
                :prop="col.prop"
                :label="col.label"
                :width="col.width"
                :min-width="col.minWidth"
                :type="col.type"
                :header-align="col.headerAlign"
                :column-key="index.toString()"
                :render-header="renderHeader"
            >
            </el-table-column>
            </el-table>
    </div>
</template>
<script>
export default{
    name : "eleDragTable",
    props: {
        // data 是列表数据集合，option 是 Table 组件配置项，header 是表头数据集合，由父组件传入
        data: {
            default: function () {
                return []
            },
            type: Array
        },
        header: {
            default: function () {
                return []
            },
            type: Array
        },
        option: {
            default: function () {
                return {}
            },
            type: Object
        }
    },
    data () {
        return {
            tableHeader: this.header,
            dragState: {
                start: -9, // 起始元素的 index
                end: -9, // 移动鼠标时所覆盖的元素 index
                dragging: false, // 是否正在拖动
                direction: undefined // 拖动方向
            }
        }
    },
    watch: {
        header (val, oldVal) {
            console.log(val)
            this.tableHeader = val
        }
    },
    methods: {
        renderHeader (createElement, {column}) {
            return createElement(
                'div', {
                'class': ['thead-cell'],
                on: {
                    mousedown: ($event) => { this.handleMouseDown($event, column) },
                    mousemove: ($event) => { this.handleMouseMove($event, column) }
                }
                }, [
                // 添加 <a> 用于显示表头 label
                createElement('a', column.label),
                // 添加一个空标签用于显示拖动动画
                createElement('span', {
                    'class': ['virtual']
                })
                ])
        },
        
        // 按下鼠标开始拖动
        handleMouseDown (e, column) {
            console.log(0)
            this.dragState.dragging = true
            this.dragState.start = parseInt(column.columnKey)
            // 给拖动时的虚拟容器添加宽高
            let table = document.getElementsByClassName('w-table')[0]
            let virtual = document.getElementsByClassName('virtual')
            for (let item of virtual) {
                item.style.height = table.clientHeight - 1 + 'px'
                item.style.width = item.parentElement.parentElement.clientWidth + 'px'
            }
            　document.addEventListener('mouseup', this.handleMouseUp);
        },

        // 鼠标放开结束拖动
        handleMouseUp () {
            this.dragColumn(this.dragState)
            // 初始化拖动状态
            this.dragState = {
                start: -9,
                end: -9,
                dragging: false,
                direction: undefined
            }
            　document.removeEventListener('mouseup', this.handleMouseUp);
        },

        // 拖动中
        handleMouseMove (e, column) {
            if (this.dragState.dragging) {
                let index = parseInt(column.columnKey) // 记录起始列
                if (index - this.dragState.start !== 0) {
                    this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
                    this.dragState.end = parseInt(column.columnKey)
                } else {
                    this.dragState.direction = undefined
                }
            } else {
                return false
            }
            console.log()
        },

        // 拖动易位
        dragColumn ({start, end, direction}) {
            let tempData = []
            let left = direction === 'left'
            let min = left ? end : start - 1
            let max = left ? start + 1 : end
            for (let i = 0; i < this.tableHeader.length; i++) {
                if (i === end) {
                tempData.push(this.tableHeader[start])
                } else if (i > min && i < max) {
                tempData.push(this.tableHeader[ left ? i - 1 : i + 1 ])
                } else {
                tempData.push(this.tableHeader[i])
                }
            }
            this.tableHeader = tempData
        },
        headerCellClassName ({column, columnIndex}) {
            let active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
            let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
            console.log( `${active} ${start}`)
            return `${active} ${start}`
        },
        cellClassName ({column, columnIndex}) {
            return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
        }
    },
}
</script>
<style lang="scss">
.w-table {
　.el-table .darg_start {
   background-color: #f3f3f3; 
  }
  .el-table th {
    padding: 0;
    .virtual{
      position: fixed;
      display: block;
      width: 0;
      height: 0;
      margin-left: -10px;
      background: none;
      border: none;
    }
    &.darg_active_left {
      .virtual {
        border-left: 2px dotted #666;
        z-index: 99;
      }
    }
    &.darg_active_right {
      .virtual {
        border-right: 2px dotted #666;
        z-index: 99;
      }
    }
  }
  .thead-cell {
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: left;
    cursor: pointer;
    overflow: initial;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  &.w-table_moving {
    .el-table th .thead-cell{
      cursor: move !important;
    }
    .el-table__fixed {
      cursor: not-allowed;
    }
  }
}
</style>

 

 4 element ui 修改默认样式

 全局修改简单

要求 某个单独的vue页面中修改样式，又不影响全局

1.在页面上再添加一个<style></style>标签，注意不需要scoped作用域，不然修改不了。

2.给要修改的标签加一个父类，在父类里重写样式，这样可以避免代码污染

<el-form-item class="demo">
    <el-input v-model="name"></el-input>
        </el-form-item>
<style>
.demo {
    .el-form-item__label{
    //重新定义的CSS属性    
    }    
}
</style>

3. 使用deep

/deep/.el-card__body {
    padding: 5px;
}

 

5 vue 模拟hover事件

1、vue里面实现hover效果基本需要用事件模拟

<div @mouseover="overShow" @mouseout="outHide"> 
　　或者是：mouseenter、mouseleave

2、比如给第三方组件ElementUI的button，在绑定mouseover和mouseout事件时，发现绑在按钮上时无效的。

解决方案：如果这个组件没处理这两个事件的话是绑不了的。可以添加.native修饰符，就可以把事件绑到组件的根元素上

<el-button type="primary" icon="el-icon-search" plain round 
@mouseenter.native="knowledge = '即将推出，敬请期待'" 
@mouseleave.native="knowledge = '知识库搜索答案'">{{knowledge}}</el-button>

 6.多选框点击后，获取当前点击的内容和选中状态

<el-form-item label="主尺码" prop="mainSize">
                        <el-checkbox-group v-model="headmess.mainSize">
                            <el-checkbox v-for="(item,index) in sizeTypeData" :key="index" :label="item.sizeCode" :name='item.sizeName'
                            @change="mainSizeChange" ></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>


//主尺码选择  变化
        mainSizeChange(falg,ele){
            console.log(falg,ele.srcElement.name)
            const checked = falg;//是否选中
            const values = ele.srcElement.name;//点击的多选框内容
            if(checked){
                var obj = {'sizeCode':values}
                this.sizeTableData.push(obj)
            }
        },

//ele的文档中，默认绑定变量的值会是Boolean，选中为true ，尝试了加了第二个参数，发现是当前元素信息，包含了当前值。所以，可以拿到当前值和当前状态

7.this.$confirm 莫名其妙的点击 确定 会执行 取消 功能！

//对比两段代码
//代码一：
this.$confirm("确定删除该颜色吗？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                        this.remove(this.$refs.tab.getRadioRecord().colorCode);
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除"
                            });
                        });
//代码二：
this.$confirm('确定要删除吗？', '友情提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                    var index = 0 ;
                    var _this = this;
                    var params = {
                        "pageNum": 0,
                        "pageSize": 100,
                        "itemPriceAdjustBean":{
                            "itemPriceAdjustHeadBean":{
                                "priceCode": this.headmess.priceCode,
                                "changeType": this.headmess.changeType,
                                "enableTime": this.headmess.enableTime,//启用时间
                                "creatPerson": "",//创建人
                                "createTime": "",//创建日期
                                "checkPerson": "",//审核人
                                "checkTime": "",//审核日期
                                "changeState": "L",
                                "remark": this.headmess.remark,
                                "confirmPerson": "",//确认人
                                "confirmTime": "",//确认日期
                            },
                            "itemPriceAdjustDetailBeanList":[]
                                
                        }
                    };
                    async function deleteList (){
                        if(_this.checkData.length>index ){
                            var obj = {};
                            obj.priceCode = _this.headmess.priceCode;
                            obj.itemCode = _this.checkData[index].itemCode;
                            obj.tunePrice = _this.checkData[index].tunePrice;
                            obj.headId = null;
                            params.itemPriceAdjustBean.itemPriceAdjustDetailBeanList = [obj];
                            await itemPriceAdjustDtlRemove(params).then((res)=>{
                                if(res.success){
                                    _this.$message({
                                        message: "删除"+_this.checkData[index].itemName+"成功",
                                        type: 'success'
                                    });
                                    _this.tableData = wfy.operObjectInArr([_this.checkData[index]],_this.tableData,'itemCode','del');
                                    index++;
                                    deleteList()
                                }else{
                                    _this.$message({
                                        message: "删除"+_this.checkData[index].itemName+"失败",
                                        type: 'warning'
                                    });
                                    index++;
                                    deleteList()
                                }
                            })
                        }else{
                            _this.getListDtl(_this.tradeCode);
                        }
                    }
                    deleteList();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });

 注意  .then(async () => {}) 里面的async

上面的代码二 如果不带有  async 等 关键字 就执行取消！！！！

8 上下级联动select组件问题

选择上级的数据后，下级已经存在的数据要清理掉。当给下级数据赋值为空的时候 ，遇到问题：即下级选择后无法在视图中显示！！！

解决方式一：绑定的时候绑定一个一级对象

eg

return {
    select2:null
}

设置this.select2 = null，这时第二个select就可以正常选择了。

方法二：$set  

this.$set(this.form, 'select1', 值)

强制更新视图

一般不会单独命名一个一级变量！，可以使用set

 

9.element UI upload组件上传附件格式限制

accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"

 

10.element的checkbox实例：复选框组，选中之后，保存选中项value值，显示label

按照官网的使用案例 被处理的数据是数组格式。选中label就得到label，但是很多情况的时候 选中label 要保存该label的value！！

 

 

selectArr:[
            {tagName:'adin',tagValue:'team'},
            {tagName:'232',tagValue:'private'},
            {tagName:'wang',tagValue:'public'}
        ]

<el-checkbox-group 
            v-if=" tagItem.dataType=='6'" 
            v-model="tagItem.checkArr">
          <el-checkbox v-for="(list,index) in tagItem.selectArr" :key="index" :label="list.tagValue">
             {{list.tagName}}  //这里 将label属性设置成value，将label名字单组添加显示
                </el-checkbox>
            </el-checkbox-group>

 

 

11.vue的input框，回车会触发刷新页面问题(2021/8/6)

 

在页面input框按回车时会触发刷新页面，而且只有第一次会触发刷新，此时路由会多一个问号：

http://172.17.17.65:8080/dataCenter/statisticalData/statisticalReport?
经查阅资料得知原因，在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

W3C 标准中有如下规定：

When there is only one single-line text input field in a form,
the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案：

在el-form标签中加入@submit.native.prevent阻止事件即可：

<el-form :inline="true" :model="searchFrom" class="search-form" @submit.native.prevent>
<el-form-item label="用户名">
<el-input v-model="searchFrom.userName" clearable />
</el-form-item>
<el-button class="btn" @click="search">查询</el-button>
</el-form>

 

 

 6666

 

 

666