使用element-ui的一些总结

1.隐藏组件el-scrollbar

使用(父级div需要设置高度)
<div class="warp">
	<el-scrollbar style="height:100%;">
		<div v-for="item in ListData" :key="item.code">
	</el-scrollbar>
</div>

2.级联选择 Cascader

不兼容Ie9，样式不是左右，而是上下，原因：dispaly: flex； 不兼容
<el-cascader
    v-model="value"
    :options="options"
    @change="handleChange">
</el-cascader>

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

3.select组件设置值

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

4.upload组件

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

5.树形表格

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

<el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

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

 <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.evaluationList"
              border
              style="width: 100%">
              <el-table-column
                label="序号"
                type="index"
                width="60"
                :index="computedIndex"
                align="center">
              </el-table-column>
              <el-table-column
                prop="content"
                label="评价详情"
                :formatter="simpleFormatData"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                prop="evaluationTime"
                label="评价时间"
                :formatter="formatDate"
                width="200"
                align="center">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="articleNum"
          label="商品编号"
          :formatter="simpleFormatData"
          align="center">
        </el-table-column>
      </el-table>

通过设置 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"
<el-table 
          @expand-change="expandSelect"
          type='index'
          :row-key='getRowKeys'
          :expand-row-keys="expands"
          :data="tableData"
          style="width: 100%">
          <!-- 排序:default-sort sortable -->
          <el-table-column label="申请时间" prop="date_created" sortable align='left'></el-table-column>
          <el-table-column label="操作" align='left' width='100px'>
            <template slot-scope="scope">
              <button class="btn" @click="handleEdit(scope.$index, scope.row)">查看</button>
            </template>
          </el-table-column>
        </el-table>
 // 折叠面板每次只能展开一行
  expandSelect (row, expandedRows) {
     var that = this
     if (expandedRows.length) {
       that.expands = []
       if (row) {
         that.expands.push(row.id)
       }
     } else {
       that.expands = []
     }
   }       

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