vue封装element组件库中的封装通用table，是否启用多选、按钮及是否分页,样式可自定义设置
程序员文章站
2022-06-25 12:10:30
页面效果封装的组件4个重要变量:columns：传入需要显示的列数组options：设置table属性样式数组operates：行数据操作按钮数组pagination：分页数组页面:
页面效果
生成的通用table效果
封装的组件4个重要变量
columns：传入需要显示的列数组
options：设置table属性样式数组
operates：行数据操作按钮数组
pagination：分页数组
页面
<template>
<div class="order_edit_content">
<div>
<el-row v-loading="loading">
<el-form :model="formData" :rules="rules" ref="formData" label-width="200px">
<!--客户名称-->
<el-form-item :label="$t('basic.customerName')+' :'" prop="customerName">
<label>{{formData.customerName}}</label>
</el-form-item>
<!--订单编号-->
<el-form-item :label="$t('buy.orderNo')+' :'" prop="orderNo">
<el-input style="width: 450px" v-model="formData.orderNo" maxlength="50">
</el-input>
</el-form-item>
<!--购买日期-->
<el-form-item :label="$t('buy.buyDate')+' :'" prop="buyDate">
<el-date-picker clearable
style="width: 450px"
v-model="formData.buyDate"
type="date">
</el-date-picker>
</el-form-item>
<!--购买产品-->
<el-form-item :label="$t('buy.buyProduct')+' :'" prop="buyProduct">
<el-input style="width: 450px" v-model="formData.buyProduct" maxlength="50">
</el-input>
</el-form-item>
<!--已选规格-->
<el-form-item :label="$t('buy.selectedProduct')+' :'" prop="selectedTableList">
<ITableShowData
:itableData="itableData"
:total="total"
:otherHeight="otherHeight"
:options="options"
:pagination="pagination"
:columns="columns"
:operates="operates"
@handlePageSizeChange="handlePageSizeChange"
@handlePageIndexChange="handlePageIndexChange">
>
</ITableShowData>
</el-form-item>
<!--备注-->
<el-form-item :label="$t('buy.remark')+' :'" prop="remark">
<el-input type="textarea"
v-model="formData.remark"
:autosize="{ minRows: 4, maxRows:4 }"
maxlength="255"
style="width: 698px;"
:placeholder="$t('contact.note')"
show-word-limit
></el-input>
</el-form-item>
</el-form>
<div style="width: 100%;margin: 0 auto auto 140px;text-align: center">
<span slot="footer" class="dialog-footer">
<el-button size="medium" type="primary" @click="confirmOrder" style="width: 110px">{{$t('cus.confirm')}}</el-button>
<el-button size="medium" @click="closePage" style="width: 110px">{{$t('cus.cancel')}}</el-button>
</span>
</div>
</el-row>
</div>
</div>
</template>
<script>
import ITableShowData from "../../../componentPackaging/table/ITableShowData"
export default {
name: "OrderEdit",
components:{
ITableShowData,
},
data() {
let checkPhoneFormat = (rule, value, callback) => {
if (value) {
if (this.validPhoneFormat(value)) {
this.formData.phoneNum = value
} else {
return callback(new Error(this.$t('contact.rules.errorTip.phoneNumFormatError')));
}
}
};
return {
itableData: [],
formData: {
customerId: '',
customerName: 'xxxxxxx',
orderNo: '',
buyDate: '',
buyProduct: '',
remark: '',
selectedTableList: [],
},
loading: false,
orderDetail: {},
validateIsEdit: false,
rules: {
buyProduct: [
{required: true, message: '请选择产品规格'},
/*{required: true, message: this.$t('contact.rules.phoneNum')},
{validator: checkPhoneFormat, trigger: 'blur'}*/
],
},
total: 0,
otherHeight: 350, //页面除table之外，其他组件所需高度
columns: [// 需要展示的列
{
prop: 'specName',
label: '产品名称',
align: 'center',
width: "170"
},
{
prop: 'specType',
label: '规格',
align: 'center',
width: "170"
},
{
prop: 'quantity',
label: '购买数量',
align: 'center',
width: "120"
},
{
prop: 'amount',
label: '金额总计',
align: 'center',
width: "120"
},
{
prop: 'profit',
label: '利润',
align: 'center',
width: "120"
},
],
operates: { // 操作按钮组
label: '操作',
align: 'center',
width: 250,
fixed: 'right',
list: []
},
pagination: { // 分页参数
pageIndex: 1,
pageSize: 10,
},
options: { // table 的参数
stripe: true, // 是否为斑马纹 table
loading: false, // 是否添加表格loading加载动画
highlightCurrentRow: true, // 是否支持当前行高亮显示
mutiSelect: false, // 是否支持列表项选中功能
fit: false , //列的宽度是否自撑开
showHeader: true, //显示表头
border: true,
divWidth: '700px',
tableWidth: '720px',
align: 'center',
enablePage: true, //开启分页
},
}
},
created() {
//只会第一次进入页面时触发一次
if ( this.$route.params.orderRow === undefined || this.$route.params.orderRow === null || this.$route.params.orderRow ==='') {
this.validateIsEdit = false
}else {
this.validateIsEdit = true
Object.assign(this.orderDetail, this.$route.params.orderRow);
this.getOrderDetailById(this.orderDetail.orderNumber)
//form表单赋值
}
},
activated() {
//页面切换进来需要执行的事件在这里写
if ( this.$route.params.orderRow === undefined || this.$route.params.orderRow === null || this.$route.params.orderRow ==='') {
console.log("activated参数:",this.$route.params.orderRow)
console.log("是否编辑跳转的:",this.validateIsEdit)
}
},
methods: {
getOrderDetailById(orderId) {
//查询最新订单信息
console.log("订单id号:",orderId)
},
//确定
confirmOrder(){
},
//取消
closePage(){
},
// 切换每页显示的数量
handlePageSizeChange (pagination) {
console.log("切换每页显示的数量")
console.log(pagination)
this.pagination = pagination
},
// 切换页码
handlePageIndexChange (pagination) {
console.log("切换页码")
console.log(pagination)
this.pagination = pagination
},
},
}
</script>
<style lang="scss" >
.order_edit_content {
width: 50%;
/*边框颜色*/
/* .el-input--small {
font-size: 13px;
!*border: 0.1px solid #A2A2A2;*!
border: 0.1px solid #666666;
border-radius: 5px;
}*/
/*.el-dialog__header {
.el-dialog__title {
font-size: 15px;
}
background-color: #efefef;
padding: 10px 10px 10px 10px;
.el-dialog__headerbtn {
top: 10px;
}
}*/
/*日期图标*/
.el-input__prefix {
left: 93%;
}
}
#area-region {
width: 820px;
height: 500px;
border: 1px solid #C0C4CC;
padding: 5px;
overflow-y: auto;
}
/*.el-tree-node {*/
/* width: 260px;*/
/* float: left;*/
/*}*/
.el-tree-node__children .el-tree-node {
width: auto;
float: left;
}
</style>
table封装通用组件
<template>
<div class="table_component_content">
<div :style="'width:' + options.divWidth + ';text-align:' + options.align">
<el-table
id="iTable"
v-loading.iTable="options.loading"
:data="itableData"
:max-height="height"
:stripe="options.stripe"
:fit="options.fit"
:cell-style="{'padding': '0px'}"
:showHeader="options.showHeader"
ref="mutipleTable"
:style="'width:' + options.tableWidth"
tooltip-effect = "dark"
:border="options.border">
<!--region 选择框-->
<el-table-column v-if="options.mutiSelect" type="selection" >
</el-table-column>
<!--endregion-->
<!--region table列遍历-->
<template v-for="(column, index) in columns">
<el-table-column :prop="column.prop"
:label="column.label"
:align="column.align"
:width="column.width">
<template slot-scope="scope">
<template v-if="!column.render">
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)"></span>
</template>
<template v-else>
<span>{{scope.row[column.prop]}}</span>
</template>
</template>
<template v-else>
<expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
</template>
</template>
</el-table-column>
</template>
<!--endregion-->
<!--region 按钮操作组-->
<el-table-column ref="fixedColumn" :label="operates.label" :header-align="operates.align" :width="operates.width" :fixed="operates.fixed"
v-if="operates.list.length > 0">
<template slot-scope="scope">
<!-- <div class="operate-group">-->
<div>
<template v-for="(btn, key) in operates.list">
<div v-if="btn.show(scope.$index,scope.row)">
<el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled(scope.$index,scope.row)"
:plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
</el-button>
</div>
</template>
</div>
</template>
</el-table-column>
<!--endregion-->
</el-table>
<!--endregion-->
<!--region 分页-->
<template v-if="options.enablePage">
<el-pagination
style="float: right;margin-right: 2%"
@size-change="handlePageSizeChange"
@current-change="handlePageIndexChange"
:current-page.sync="tableCurrentPagination.pageIndex"
:page-size="tableCurrentPagination.pageSize"
:page-sizes="tableCurrentPagination.pageArray"
layout="total,sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
<!--endregion-->
</div>
</div>
</template>
<script>
const _pageArray = [5,10, 20, 30, 40, 50, 100] // 每页展示条数的控制集合
export default {
name: "ITableShowData",
props: {// 数据列表
itableData: {
type: Array,
default: [] // prop:表头绑定的地段，label：表头名称，align：每列数据展示形式（left, center, right），width:列宽
},
columns: {// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
type: Array,
default: []
},
operates: {
// width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，
// type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
type: Object,
default: {}
},
total: {// 总数
type: Number,
default: 0
},
pagination: { // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
type: Object,
default: null
},
otherHeight: { // 计算表格的高度
type: Number,
default: 320
},
options: { // table 表格的控制参数
type: Object,
default: {
stripe: false, // 是否为斑马纹 table
loading: false, // 是否添加表格loading加载动画
highlightCurrentRow: false, // 是否支持当前行高亮显示
mutiSelect: false, // 是否支持列表项选中功能
fit: false , //列的宽度是否自撑开
showHeader: false, //显示表头
border: false,
tableWidth: '720px',
divWidth: '720px',
align: 'center',
enablePage: true, //开启分页
}
}
},
components: {
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
data() {
return {
orderListPageData: [],
screenHeight: document.body.clientHeight,
selectedIds: [],
starColors: ['#606266', '#606266', '#606266'],
loading: false,
pageIndex: 1,
tableCurrentPagination: {
pageIndex: 1,
pageSize: 10,
pageArray: _pageArray,
},
}
},
watch: {
},
created() {
},
activated() {
},
mounted() {
// 窗口或页面被调整大小时触发事件
window.onresize = () => {
// 获取body的高度
this.screenHeight = document.body.clientHeight
}
this.verifyIsNeedPagination()
},
computed: {
// 根据当前窗口高度动态设置el-table的显示高度，避免出现不必要的滚动条
// 以及由于el-table内容过长而导致的分页器无法显示在当前看到的界面
// X的值为页面除了el-table以外，el-table的其他兄弟标签的高度和（本例中为el-form与el-pagination的高度和）
// X的值可以不用特意获取，写个大概值，然后再调。
getTableHeight() {
return this.screenHeight - 350
},
// 计算table高度
height () {
//return this.screenHeight - 350
return this.screenHeight - this.otherHeight
}
},
methods: {
verifyIsNeedPagination(){// 判断是否需要分页,不分页可初始化 tableCurrentPagination：{}
/* if (this.pagination && !this.pagination.pageSizes) {
this.pagination.pageArray = _pageArray // 每页展示条数控制
}*/
this.tableCurrentPagination = this.pagination || {
pageIndex: 1,
pageSize: 10,
}
},
getRowKeys(row) {
return row.id;
},
// 切换每页显示的数量
handlePageSizeChange(currentPageSize) {
this.tableCurrentPagination = {
pageIndex: 1,
pageSize: currentPageSize,
}
this.$emit('handlePageSizeChange', this.tableCurrentPagination)
},
// 切换页码
handlePageIndexChange(currentPageIndex) {
this.tableCurrentPagination.pageIndex = currentPageIndex
this.$emit('handlePageIndexChange', this.tableCurrentPagination)
},
}
}
</script>
<style lang="scss" scope>
.table_component_content {
/*width: 700px;*/
/*text-align: center;*/
//表头样式
/* .el-table__header {
height: 25px;
background: #EEEEEE;
}*/
.el-table__expanded-cell{
/*子table左移无间隙*/
padding: 0px 0px 0px 0px;
font-size: 14px;
}
.el-table--border {
border: 1px solid #c0c4cc;
}
/*.el-table th>.cell {
margin-left: 20px;
}*/
/* .el-table td, .el-table th.is-leaf {
border-bottom: 1px solid #c0c4cc;
}*/
.el-table thead th {
//background: #D3D3D3;
background: #f2f2f2;
line-height: 25px;
padding: 0px;
}
.top-column-lab {
//background: #D3D3D3;
text-align: center;
font-size: 14px;
//line-height: 30px;
height: 25px;
background: #EEEEEE;
}
.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
//table头边框
//border-right: 1px solid #c0c4cc;
border-right: 1px solid #dadada;
}
.el-table__body-wrapper {
//滑动条
overflow-x: hidden;
}
.el-table th > .cell {
font-weight: 400;
color: #333333;
margin-top: 4px;
}
}
</style>
参考：https://juejin.im/post/5a6941dc518825732258e321#heading-4
本文地址：https://blog.csdn.net/Seven71111/article/details/107455221