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 = []
}
}