使用element-ui的一些总结

1.隐藏组件el-scrollbar

使用(父级div需要设置高度)

	
		

	

2.级联选择 Cascader

不兼容Ie9，样式不是左右，而是上下，原因：dispaly: flex； 不兼容

改进办法：重置Cascader的样式，dispaly: block;选择器**.el-scrollbar**改成浮动就好。

3.select组件设置值

前后可能绑定的值不一致，导致下拉选择不能使用
注意：后台返回值是数值，还是字符串

4.upload组件

上传在ie9上不兼容，需要重新写上传组件

5.树形表格

暂不支持属性表格带多选
两个关键属性【row-key】【tree-props】

6.表格多选分页记忆（vue + element-ui）

主要思路： 记录当前页的选中状态；记录全部选中数据；标识行的id

multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: 'rowId', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)

核心代码

// 设置选中的方法
    setSelectRow () {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return
      }
      // 标识当前行的唯一键的名称
      let idKey = this.idKey
      let selectAllIds = []
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey])
      })
      this.$refs.multipleSelectionRef.clearSelection()
      for (var i = 0; i < this.tableData.length; i++) {
        if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="multipleSelectionRef"
          this.$refs.multipleSelectionRef.toggleRowSelection(this.tableData[i], true)
        }
      }
    }

// 核心方法
    changePageCoreRecordData () {
      // 标识当前行的唯一键的名称
      let idKey = this.idKey
      let that = this
      // 如果还没有选择的数据，那么就直接取当前页选中的数据，直接返回
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection
        return
      }
      // 总选择里面的key集合
      let selectAllIds = []
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey])
      })
      let selectIds = []
      // 获取当前页选中的id
      this.multipleSelection.forEach(row => {
        selectIds.push(row[idKey])
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row)
        }
      })
      let noSelectIds = []
      // 得到当前页没有选中的id
      this.tableData.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey])
        }
      })
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] === id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.multipleSelectionAll.splice(i, 1)
              break
            }
          }
        }
      })
    }

// 获取所有选中项
getAllSelectionData () {
      // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
      this.changePageCoreRecordData()
    },

7. 表格折叠-不兼容ie

通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容。
问题： 展开内容的表格列的宽度会失效
解决： 设置样式同时样表格行展开只展开一行

.el-table__body {
  width: 100% !important;
}
.el-table__header {
  width: 100% !important;
}

设置这三个属性 增加一个方法
// @expand-change="expandSelect"
//  :row-key='getRowKeys'
// :expand-row-keys="expands"

          
          
          
            
          
        
 // 折叠面板每次只能展开一行
  expandSelect (row, expandedRows) {
     var that = this
     if (expandedRows.length) {
       that.expands = []
       if (row) {
         that.expands.push(row.id)
       }
     } else {
       that.expands = []
     }
   }       

想要了解更多可关注vue-element-admin