20220712Vue组件.png

Vue组件

什么是组件

组件是一种编程抽象，其目的是复用

• 通用型组件
• 业务性组件

为什么需要组件

从业务角度看，业务成长到一定规模后，共性的地方需要复用。

从设计角度看，产品会遵循一定的设计规范，需要保证产品一致性。

从开发效率角度看，快速响应业务开发。

从维护角度看，需要统一管理代码，一处修改全局响应 而非到处复制粘贴。

组件库的价值

就个人而言，拥有一套自己的组件库，可以让开发更高效

就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范

就公司而言，拥有一套公司维护的开源组件库，公司在行业内更具影响力

组件设计原则

就近原则

• 单文件开发 vue文件 三部分在同一页面
• 相关联组件放在同级目录

高复用性

• 页面级别的复用 （基础组建）
• 项目级别的复用-私有组件库（业务组件）
• 公司级别的复用-开源组件库（ elment-ui）

灵活扩展

• 利用slot插槽完成用户个性化定制需求

封装组件分类

木偶组件

一般通过props从父组件获取数据 给什么数据就显示什么数据 给什么方法 就调用什么方法

• 内部只处理渲染工作 。固定部分 变化部分进行了很好的分离。

智能组件

最外层的父组件，拥有数据

• 数据的传递
• 回调的处理

通用型-表格封装

 <el-table max-height="600" border  :data="dataList" >
   <el-table-column align="center" prop="deliveryOrderNo" label="发货单编号" width="200px" />
   <el-table-column align="center" prop="deliveryTime" label="发货时间" width="200px" />
   <el-table-column align="center" prop="deliveryUser" label="发货人" />
   <el-table-column align="center" prop="deliveryPhone" label="联系电话" />
   <el-table-column align="center" prop="logisticsTypeName" label="配送方式" />
   <el-table-column align="center" prop="logisticsCodeName" label="配送公司" />
   <el-table-column align="center" prop="logisticsNo" label="配送单号" />
   <el-table-column align="center" prop="logisticsFile" label="配送凭证">
        <template slot-scope="scope">
                  <el-button type="text" @click="onDownloadClick(scope.row.logisticsFile)">下载</el-button>
         </template>
   </el-table-column>
</el-table>

首先要明确表格自身具有哪些属性，此处展示一些常用的属性

• table表格的属性

  • 1 border 是否带有纵向边框
    2 empty-text 空数据时显示文本
    3 loading
    ......

• 列属性

1、hidden: 是否显示
2 、prop 对应字段名
3 、lable 列标题
4 、showTooltip: 内容过长隐藏显示省略号
5、width 对应列宽度
6、fixed 列是否固定在左侧 (true left right)
7、align
8、slot 特殊字段处理
1 某字段需要个性化处理呢
诸如“状态”字段 要求不同状态值，文字显示不同颜色，或者前缀有不同图标。
2 一行有多个字段同时需要个性化处理呢

封装代码

<template>
    <el-table :data="tableData" :height="height" v-loading="tableLoading" border>
        <template v-for="(item,index) in tableColumns" :key='index'>
            <!-- 列 -->
            <el-table-column
                :key="`${item.label}`"
                :prop="item.prop"
                :label="item.label"
                :align="item.align || 'center'"
                :show-overflow-tooltip="!item.tooltip?item.tooltip:'true'"
                :min-width="item.minWidth || '110px'"
            >
                <template slot-scope="{row}">
                    <div v-if="item.slot">
                        <slot :name="item.prop" :row="row">{{ row }}</slot>
                    </div>
                    <div v-else>
                        <span v-if="!item.money">{{ row[item.prop] }}</span>
                        <span v-else>{{ addCommas(row[item.prop] ) }}</span>
                    </div>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<script>
import tableResize from '@/mixins/tableResize';
export default {
    name: 'Index',
    mixins: [
        tableResize,
    ],
    props: {
        // 表格数据
        tableData: {
            type: Array,
            default: () => [],
        },
        // 列
        tableColumns: {
            type: Array,
            default: () => [],
        },
        tableLoading: {
            type: Boolean,
            default: false,
        },
        height: {
            type: [Number, String],
            default: 'auto',
        },
    },
};
</script>

全局注册

image.png

使用：

定义数据源+表格列

            tableDataPay: [],
            tableColumnsPay: [
                { prop: 'invoiceRealTypeView', label: '发票类型' },
                { prop: 'invoiceNo', label: '发票号码' },
                { prop: 'buyerName', label: '购买方名称' },
                { prop: 'sellerName', label: '销售方名称' },
                { prop: 'invoiceTotalAmount', label: '价税合计金额', money: true },
                { prop: 'invoiceId', label: '销货清单', slot: true },
                { prop: 'invoiceInfoOssKey', label: '发票', slot: true },
                { prop: 'thirdInvoiceStateView', label: '发票状态' },
                { prop: 'invoiceRealTypeView', label: '开票类型' },
                { prop: 'invoiceDate', label: '开票日期', tooltip: false },
                // { prop: 'postNumber', label: '邮寄单号' }, // 需求文档：这两个前端暂时不展示
                // { prop: 'postStateView', label: '邮寄状态' },
            ],

<FTable :table-data="tableDataPay" :table-columns="tableColumnsPay">
   <template v-slot:invoiceId="scope">
        <el-button type="text" @click="showSaleList(scope.row.invoiceId,2)">查看</el-button>
   </template>
   <template v-slot:invoiceInfoOssKey="scope">
       <el-button type="text" @click="previewImage(scope.row.invoiceInfoOssKey)">查看</el-button>
  </template>
</FTable>