笔记-vue 问题合集

Vue.js中的el-table优化与文件下载问题解决

最新推荐文章于 2025-12-10 10:47:58 发布

原创最新推荐文章于 2025-12-10 10:47:58 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #笔记 #javascript

磨人的项目终告一个段落，好记性不如烂笔头，整理下

一、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>