一、Switch 无法正常更新的问题
开发中，switch 的 v-model 需要绑定深层次的属性 inherit：
const obj = [{
name: 'xxx',
children: [{
inherit: false
}]
}]
问题：常规的写法并不会根据 switch 的动作实时更新开关状态（点击开关没反应，必须刷新才有效果）
<el-switch
v-model="row.inherit"
</el-switch>
解决方法：需要使用 vue 中自带的 $set 函数来辅助更新数据
<el-switch
v-model="row.inherit"
@change="controlSwitch($event, row)">
<!-- $event 传递的是更改的值 -->
</el-switch>
<script>
export default {
methods: {
controlSwith(val, row) {
// this.$set(target, key, value)
this.$set(row, row.inherit, val)
}
}
}
</script>
二、使用嵌套 Dialog 或者连续使用 Dialog 并嵌套 Select 时，Select 层级过低问题
<!-- 为每个 select 都设置以下属性 -->
<el-select :popper-append-to-body="false" popper-class="select-popper">
/* 解决 dialog 嵌套 select 显示层级不正常问题 */
.el-select /deep/ .select-popper {
z-index: 8888 !important;
top: auto !important;
left: auto !important
}
三、el-table 仅修改一行更新 tableData 但无法更新 DOM？
<el-table
:tableData="tableData"
:key="refreshFlag">
</el-table>
<script>
data () {
return {
refreshFlag: false,
}
},
watch: {
tableData: {
handler (val) {
if (val) {
this.refreshFlag = !this.refreshFlag
}
},
deep: true
}
}
</script>
四、El-checkbox 点击两次才切换，或者点击根本不切换
使用 :value 而非 v-model
五、上传/下载文件（Excel 为例）
<el-upload
drag
action=""
:show-file-list="false"
:before-upload="isExcel"
:http-request="importExcel">
</el-upload>
<el-button type="primary" icon="el-icon-download" @click="export2Excel(true)">下载模板</el-button>
// 判断是否是 Excel 文件(.xlsx 后缀)
isExcel (file) {
if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
this.excelFile = file
return true
} else {
errorMsg('请上传 .xlsx 后缀的 excel 文档')
return false
}
},
/**
* 导入 Excel
* 1、请求头：multipart/form-data
* 2、格式正确响应：response.data.type === 'application/json'
* 3、格式错误响应：response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
* 4、上传成功后需要等待几秒后再刷新
*/
async importExcel (event) {
const formData = new FormData()
formData.append('excelFile', event.file)
await $http.post('api地址', formData, {
headers: {
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryVCFSAonTuDbVCoAN'
},
responseType: 'blob'
}).then(
response => {
if (response.data.type !== 'application/json') {
warningMsg('上传失败啦！请接收失败原因')
saveAs(
new Blob([response.data],
{ type: 'application/octet-stream' }),
'Excel 文件上传失败原因.xlsx'
)
} else {
successMsg('上传成功！正在处理，请稍后刷新查看')
}
})
},
/**
* 导出成员列表为 Excel
* 1、响应类型：blob
* 2、使用插件 { savaAs } = file-saver 解析 blob
*/
async export2Excel (template = false) {
await $http.get('api地址', {
responseType: 'blob'
}).then(
response => {
saveAs(
new Blob([response.data],
{ type: 'application/octet-stream' }),
'下载文件名.xlsx'
)
},
reject => {
errorMsg(`导出 Excel 异常：${reject.message ?? '未知错误'}`)
})
},
