vue2使用小记

最新推荐文章于 2025-03-26 20:16:04 发布

AKA__老方丈

最新推荐文章于 2025-03-26 20:16:04 发布

阅读量560

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/m0_73321385/article/details/134754786

版权

el-form表单嵌套Select 选择器

el-select 属性

filterable：用于搜索下拉框中的选项

clearable：清空选择项

multiple：可以多选，传递的值为数组格式，不写默认单选传递的值为字符串

:collapse-tags="true"：将选中值按文字的形式展示，看下图

                <el-form-item label="场景：">
                    <el-select v-model="listQuery.ChannelCategory" class="input-width" placeholder="全部" filterable clearable
                        @keyup.enter.native="handleSearchList" :collapse-tags="true">
                        <el-option v-for="item in ChannelCategory" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

去除el-table内边距

首先使用:header-cell-style="tableHeaderCellStyle"和:cell-style="tableCellStyle"用来定义表头单元格和普通单元格的样式。

        <el-table class="custom-table" highlight-current-row :data="TargetData" style="width: 100%"
            element-loading-spinner="el-icon-loading" v-loading="loading" element-loading-text="拼命加载中" max-height="500"
            :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle">

然后使用 computed 属性来定义计算属性。在这里，tableHeaderCellStyle 和 tableCellStyle 都是计算属性，它们会根据特定的逻辑返回一个样式对象。

 computed: {

        tableHeaderCellStyle() {
            return {
                color: '#000', // 字体颜色
                fontSize: '12px', // 字体大小
                fontFamily: '微软雅黑', // 字体样式
                // textAlign: 'center', // 文本居中对齐

            };
        },
        // table文本居中
        tableCellStyle() {
            return {
                fontSize: '0.17rem', // 字体大小
                // textAlign: 'center', // 文本居中对齐
                padding: 0,
                margin: 0,
            };
        },
    },

对于 tableHeaderCellStyle，它返回一个对象，其中包含了一些用于定义表头样式的属性，比如字体颜色、字体大小、字体样式等。

对于 tableCellStyle，它返回一个对象，其中包含了一些用于定义表格内容样式的属性，比如字体大小、内边距、外边距等。

这样做的好处是，如果这些样式需要根据特定逻辑或数据动态变化，可以将其定义为计算属性，从而使得样式可以根据数据的变化而动态更新，而不需要手动编写复杂的逻辑来实现样式的动态变化。

查询loading效果

        <el-button icon="el-icon-search" type="primary" @click="handleSearchList()" style="margin-top: 37px;"
          v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>


 return {
      fullscreenLoading: false,//全屏遮罩
}


    //搜索
    handleSearchList() {
      this.fullscreenLoading = true;
      setTimeout(() => {
       //调用接口
        this.fullscreenLoading = false;
      }, 2000);

    },

导出功能添加全屏loading 页面禁止其它操作

    // 导出 
    async ProfitMarginExcel() {
      this.$message({
        message: '正在为您导出全量明细',
        type: 'warning',
      });

//loading效果
      const loading = this.$loading({
        lock: true,
        text: '导出完成后自动打开excel',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const startDate = this.listQuery.ownUpdatedTime ? this.listQuery.ownUpdatedTime[0] : null;
      const endDate = this.listQuery.ownUpdatedTime ? this.listQuery.ownUpdatedTime[1] : null;
      const data = {
        
      }
      try {
        // 发送 POST 请求获取 Excel 数据
        const response = await ExcelomnichannelMarginalProfitApi(data)

        // 创建 Blob 对象并下载文件
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = '全量明细报表.xlsx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // 导出完成后关闭加载状态
        loading.close();
      } catch (error) {
        console.error('导出 Excel 出错：', error);
      }
    },