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 border 是否带有纵向边框
列属性
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>
