20220712Vue組件.png

Vue組件

什么是組件

組件是一種編程抽象耀怜，其目的是復(fù)用

• 通用型組件
• 業(yè)務(wù)性組件

為什么需要組件

從業(yè)務(wù)角度看，業(yè)務(wù)成長到一定規(guī)模后菜拓，共性的地方需要復(fù)用倍踪。

從設(shè)計角度看系宫，產(chǎn)品會遵循一定的設(shè)計規(guī)范，需要保證產(chǎn)品一致性建车。

從開發(fā)效率角度看扩借，快速響應(yīng)業(yè)務(wù)開發(fā)。

從維護(hù)角度看缤至，需要統(tǒng)一管理代碼潮罪，一處修改全局響應(yīng) 而非到處復(fù)制粘貼。

組件庫的價值

就個人而言领斥，擁有一套自己的組件庫嫉到，可以讓開發(fā)更高效

就團(tuán)隊而言，擁有一套團(tuán)隊的組件庫月洛，可以讓協(xié)同開發(fā)變得更高效規(guī)范

就公司而言何恶，擁有一套公司維護(hù)的開源組件庫，公司在行業(yè)內(nèi)更具影響力

組件設(shè)計原則

就近原則

• 單文件開發(fā) vue文件 三部分在同一頁面
• 相關(guān)聯(lián)組件放在同級目錄

高復(fù)用性

• 頁面級別的復(fù)用 （基礎(chǔ)組建）
• 項目級別的復(fù)用-私有組件庫（業(yè)務(wù)組件）
• 公司級別的復(fù)用-開源組件庫（ elment-ui）

靈活擴(kuò)展

• 利用slot插槽完成用戶個性化定制需求

封裝組件分類

木偶組件

一般通過props從父組件獲取數(shù)據(jù) 給什么數(shù)據(jù)就顯示什么數(shù)據(jù) 給什么方法 就調(diào)用什么方法

• 內(nèi)部只處理渲染工作 膊存。固定部分 變化部分進(jìn)行了很好的分離导而。

智能組件

最外層的父組件忱叭，擁有數(shù)據(jù)

• 數(shù)據(jù)的傳遞
• 回調(diào)的處理

通用型-表格封裝

 <el-table max-height="600" border  :data="dataList" >
   <el-table-column align="center" prop="deliveryOrderNo" label="發(fā)貨單編號" width="200px" />
   <el-table-column align="center" prop="deliveryTime" label="發(fā)貨時間" width="200px" />
   <el-table-column align="center" prop="deliveryUser" label="發(fā)貨人" />
   <el-table-column align="center" prop="deliveryPhone" label="聯(lián)系電話" />
   <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 空數(shù)據(jù)時顯示文本
    3 loading
    ......

• 列屬性

1、hidden: 是否顯示
2 韵丑、prop 對應(yīng)字段名
3 爵卒、lable 列標(biāo)題
4 、showTooltip: 內(nèi)容過長隱藏顯示省略號
5撵彻、width 對應(yīng)列寬度
6钓株、fixed 列是否固定在左側(cè) (true left right)
7实牡、align
8、slot 特殊字段處理
1 某字段需要個性化處理呢
諸如“狀態(tài)”字段 要求不同狀態(tài)值轴合，文字顯示不同顏色创坞，或者前綴有不同圖標(biāo)。
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: {
        // 表格數(shù)據(jù)
        tableData: {
            type: Array,
            default: () => [],
        },
        // 列
        tableColumns: {
            type: Array,
            default: () => [],
        },
        tableLoading: {
            type: Boolean,
            default: false,
        },
        height: {
            type: [Number, String],
            default: 'auto',
        },
    },
};
</script>

全局注冊

image.png

使用：

定義數(shù)據(jù)源+表格列

            tableDataPay: [],
            tableColumnsPay: [
                { prop: 'invoiceRealTypeView', label: '發(fā)票類型' },
                { prop: 'invoiceNo', label: '發(fā)票號碼' },
                { prop: 'buyerName', label: '購買方名稱' },
                { prop: 'sellerName', label: '銷售方名稱' },
                { prop: 'invoiceTotalAmount', label: '價稅合計金額', money: true },
                { prop: 'invoiceId', label: '銷貨清單', slot: true },
                { prop: 'invoiceInfoOssKey', label: '發(fā)票', slot: true },
                { prop: 'thirdInvoiceStateView', label: '發(fā)票狀態(tài)' },
                { prop: 'invoiceRealTypeView', label: '開票類型' },
                { prop: 'invoiceDate', label: '開票日期', tooltip: false },
                // { prop: 'postNumber', label: '郵寄單號' }, // 需求文檔：這兩個前端暫時不展示
                // { prop: 'postStateView', label: '郵寄狀態(tài)' },
            ],

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