磨人的项目终告一个段落,好记性不如烂笔头,整理下
一、el-table 列值格式化(有值显示值,无值显示--)
<template>
<div>
<el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
<el-table-column prop="name" label="名称" sortable width="120" :formatter="formatColumnValue"/>
</el-table>
</div>
</template>
<script>
export default {
methods: {
formatColumnValue(row, column) {
return row[column.property] || '--';
},
}
}
</script>
二、el-table中el-button根据接口数据动态设置disabled时有异常
解决办法:给el-button设置key
<template>
<div>
<el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
<el-table-column prop="name" label="名称" sortable width="120" :formatter="formatColumnValue"/>
<el-table-column label="操作" align="left" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-user-solid"
:key="scope.row.id"
:disabled="scope.row.type ? false : true"
v-if="scope.row.type=== 1"
@click="handleFace(scope.row)"
>查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
三、下载压缩包文件
用<a :href="selectDictLabel(dict.type.system_page, 0)">下载</a>会出现重新打开浏览器的问题
<template>
<div>
<el-button type="text" @click="downloadFile(selectDictLabel(dict.type.system_page, 0))" style="color:blue">下载</el-button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(url) {
console.log(url)
const filename = url.substring(url.lastIndexOf('/') + 1);;
fetch(url)
.then(response => response.blob())
.then(blob => {
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => console.error('Error downloading zip file:', error));
}
}
}
</script>