element问题总结

1.table行样式row-style 单元样式cell-style

    
      
    
// 方法
tableRowStyle({
        row,
        rowIndex
      }) {
        // 注意，这里返回的是一个对象
        let res = {};
        if (row.shoudlPay.includes("综合账单vs明细账单")) {
          res.color = 'red';
          res.background = 'blue';
        } 
        return res ;
      },

2.element-vue中el-table去除鼠标悬停背景色

.el-table /deep/ tbody tr:hover>td { 
    background-color:#ffffff!important
}

3.el-table el-table-column template 列函数

    
    
        
    
    
        
    


// scope.row 能获取当前行的数据
handleMore(row) {
    row
    debugger
}
getArrow(num) {
    if (num > 0) {
        return ''
    } else if (num < 0) {
        return ''
    } else if (num = 0) {
        return ''
    }
},

4.el-menu菜单

      
        
            

                

                    {{subitem.label}}
                
            
    

5. :rules 检测 el-date-picker数组

    
    


rules: {
  time: [{
    type: 'array',
    required: true,
    message: '请选择日期区间',
    fields: {
      0: {
        type: 'string',
        required: true,
        message: '请选择开始日期'
      },
      1: {
        type: 'string',
        required: true,
        message: '请选择结束日期'
      }
    }
  }]
},

6.修改el-transfer的按钮为垂直样式

  .my-transfer /deep/.el-transfer__button {
    display: block !important;
  }

  .my-transfer /deep/ .el-transfer-panel__body {
    height: 180px;
  }

  .my-transfer /deep/ .el-transfer-panel__list.is-filterable {
    height: 75%;
    padding-top: 0;
  }

  .my-transfer /deep/ .el-button+.el-button {
    margin-left: 0px;
  }

  .my-transfer /deep/ .el-transfer-panel {
    width: 38%;
  }

7.:rule检测数字

test: {
    required: true,
    type: 'number',
    transform(value) {
        if (value) {
            return Number(value);
        }
    },
    message: '请输入透支金额(数字)',
    trigger: 'blur'
},

8.element中可以输入table表格（双击可以修改输入）

也可以用scope.$index el-table的顺序

    
        
    


templateTable: [{
    name: '张三',
    isOK: false,
  },{
    name: '李思',
    isOK: false,
  }],

  dbclick(row, event, column) {
    row.isOK = !row.isOK
  },

9.在el-tabs组件 最右侧添加按钮

使用CSS来实现，css原理解释：

1.如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static；

2.position：static 默认值，没有定位，元素出现在正常的流中；

3.position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body）；

  
    Tab页签内容1
    Tab页签内容2
  
    右边按钮
  

10.弹框关闭，弹框中的select选项不关闭问题

方法一

    
    
    


// 方法
    handleClose() {
      this.$nextTick(function() {
        this.$refs.carrerSelect.forEach(v => {
          v.blur();
        });
      });
    },

方法二

el-dialog组件中的 destroy-on-close 属性

11.el-tooltip 设置宽度

1.方法1会影响其他页面不推荐(el-tooltip__popper不能加scoped)

2.方法2solt修改(设置宽度,不会影响其他页面)

         
	
   	
展示内容

12.vue无法穿透elemet样式 例如el-time-spinner__wrapper

popper-class="data-performance-monitor"

13.rules写到el-form-item上

重要:
1.   prop 必须用formParam.param

2.   rules:随便选一个规则,例如 :rules="formParamRules.content"

或者 [{ required: true, message: '请输入活动主题', trigger: 'blur' }] 必须有中括号

    
        
    


for(var i=0;i<10;i++){
    this.$set(this.formParam.param, i, {
        'key': i,
        'value': '',
        'name': name[i]
    })
}

formParamRules: {
content: [
        { required: true, message: '请输入活动主题', trigger: 'blur' }
    ],
}

14.el-row加上justify="center" 之后 el-col不换行

只需要给el-row 加上样式 style="flex-wrap: wrap; flex-direction: row"

15.页面报错：Invalid prop: custom validator check failed for prop “percentage“.

  解决方法： 在里边添加一个v-if的判断，判断一下你要的数据是否存在。

16.修改default-active的值，不生效

默认打开菜单,但是default-active不生效

原因: 刷新菜单后,没有生成,需要在$nextTick之后重新赋值

// 重新赋值
this.$nextTick(() => {
    this.$refs.menuAction.activeIndex = 'XXXXX'
})

17.element前台分页

    
    




data() {
    // 分页
    page: {
        PageNum: 1,
        PageSize: 5
    },
    tableTotal: 0,
    // 所有数据
    tableData: [],
    // 展示数据
    tableDataPage: []
}

methods: {

setPage() {
      this.tableTotal = this.tableData.length
      // 开始位置
      let startingPosition = (this.page.PageNum-1) * this.page.PageSize
      if (startingPosition > this.tableTotal) {
        this.tableDataPage = []
      } else {
        this.tableDataPage = this.tableData.filter((item,index) => {
          // 当前索引小于开始位置,返回false
          if (index < startingPosition) {
            return false
          } else {
            // 当前索引大于开始位置加页数显示的个数,返回false
            if (index >= (startingPosition + this.page.PageSize)) {
              return false
            } else {
              return true
            }
          }
        })
      }
    },
initTable() {
// 获得所有数据
this.tableData = XXXX.publicRequest()  
this.page.PageNum = 1
this.setPage()
}
}

18.element表格跨页多选

row-key属性和reserve-selection属性 

原理类似于存在缓存,存储所有选择的数据,不会因为分页影响缓存数据,删除或者修改之后,需要this.multipleSelection = []

19.el-form设置disabled，要给其中的一个 el-form-item 取消禁用

    
      禁用
    
    
      不禁用