<template>
<div>
<el-form
ref="tableFrom"
class="tableForm"
:model="{ ...list }"
:rules="tableFromRules"
>
<el-table
ref="table"
:height="height"
:data="list"
:border="border"
:default-sort="{ prop: 'date', order: 'descending' }"
@selection-change="handleSelectionChange"
:row-key="rowKey"
>
<!-- 表格业务内容列 -->
<template v-for="(item, index) in tableOptions">
<el-table-column
v-if="item.prop || item.type"
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align || ''"
:show-overflow-tooltip="item.overHidden || false"
:width="item.width"
:sortable="item.sortable || false"
:type="item.type || 'normal'"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
v-else
:key="index"
:prop="item.slotName"
:label="item.label"
:align="item.align || ''"
:show-overflow-tooltip="item.overHidden || false"
:width="item.width"
:sortable="item.sortable || false"
:type="item.type || 'normal'"
:reserve-selection="true"
>
<template slot-scope="scope">
<el-form-item
:prop="scope.$index + '.' + item.slotName"
:rules="tableFromRules[item.slotName]"
>
<slot :name="item.slotName" :row="scope.row"> </slot>
<span class="item-error" slot="error" slot-scope="scope">{{
scope.error
}}</span>
</el-form-item>
</template>
</el-table-column>
</template>
<!-- 表格操作列 -->
<el-table-column label="操作" v-if="isOperate">
<template slot-scope="scope">
<slot name="operate" :row="scope.row"></slot>
</template>
</el-table-column>
</el-table>
</el-form>
<div v-if="hidden" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script>
export default {
props: {
height: {
type: String,
},
border: {
type: Boolean,
default: false,
},
// 翻页选中
rowKey: {
type: String,
default: " ",
},
// form数据
tableFrom: {
type: [Object],
default: function () {
return { tableData: [] };
},
},
// 表格校验
tableFromRules: [Object],
// 表格配置
tableOptions: {
type: Array,
default: function () {
return [];
},
},
// 控制操作列是否显示
isOperate: {
type: Boolean,
default: function () {
return false;
},
},
total: {
required: true,
type: Number,
},
page: {
type: Number,
default: 1,
},
limit: {
type: Number,
default: 10,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50];
},
},
// 移动端页码按钮的数量端默认值5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7,
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
background: {
type: Boolean,
default: true,
},
autoScroll: {
type: Boolean,
default: true,
},
hidden: {
type: Boolean,
default: false,
},
},
data() {
return {
list: [],
};
},
watch: {
tableFrom: {
handler(newVal) {
for (const item in newVal) {
this.list = newVal[item];
}
},
deep: true,
immediate: true,
},
},
mounted() {},
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
console.log(val, "!!!");
this.$emit("update:page", val);
},
},
pageSize: {
get() {
return this.limit;
},
set(val) {
console.log(val, "@@@");
this.$emit("update:limit", val);
},
},
},
methods: {
handleSelectionChange(list) {
this.$emit("handleSelectionChange", list);
},
handleSizeChange(val) {
if (this.currentPage * val > this.total) {
this.currentPage = 1;
}
this.$emit("pagination", { page: this.currentPage, limit: val });
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
// if (this.autoScroll) {
// scrollTo(0, 800);
// }
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .tableForm {
.el-form-item {
margin-bottom: 0;
}
.el-form-item--medium .el-form-item__content {
line-height: 20px;
}
.item-error {
color: #ff4949;
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
}
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
.el-table {
.el-table__fixed {
height: auto !important;
bottom: 17px !important;
}
}
.el-table__body-wrapper {
z-index: 2;
}
</style>
用法
<template>
<div class="app-container analyeOrder">
<FromTable
ref="formTable"
:tableFrom="tableFrom"
:tableOptions="productOptions"
:tableFromRules="tableFromRules"
:total="total"
:page.sync="productParams.pageNum"
:limit.sync="productParams.PageSize"
@handleSelectionChange="handleSelectionChange"
>
<template slot="productNo" slot-scope="scope">
<el-input v-model="scope.row.productNo"></el-input>
</template>
<template slot="materialName" slot-scope="scope">
<el-input v-model="scope.row.materialName"></el-input>
</template>
</FromTable>
<el-button @click="submitForm">提交</el-button>
</div>
</template>
<script>
import FromTable from "@/components/FormTable";
export default {
name: "AnalyseOrder",
components: {
FromTable,
},
data() {
return {
total: 0,
tableFrom: {
analyseData: [{ productNo: "1234" }],
},
productOptions: [
{
type: "selection",
label: "#",
},
{
label: "SAP物料编码",
slotName: "productNo",
},
{
label: "物料名称",
slotName: "materialName",
},
],
tableFromRules: {
productNo: [
{ required: true, message: "不能为空", trigger: ["blur", "change"] },
],
materialName: [
{ required: true, message: "不能为空", trigger: ["blur", "change"] },
],
},
productParams: {
pageNum: 1,
PageSize: 10,
},
};
},
methods: {
// 表单提交
submitForm() {
const formValidate = this.$refs.formTable.$refs.tableFrom;
formValidate.validate((valid) => {
if (valid) {
console.log(this.tableFrom.analyseData);
}
});
},
// 表格多选数据
handleSelectionChange(selcetion) {
console.log(selcetion);
},
},
};
</script>
<style lang="scss" scoped></style>