组件部分:
<template>
<div id="tableCol">
<el-table
@row-click="clickRow"
@cell-click="cellClick"
:cell-class-name="cellClass"
:ref="tableAll.select ? 'multipleTable' : 'refTable'"
@selection-change="handleSelectionChange"
v-loading="tableAll.loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
border
highlight-current-row
:max-height="tableAll.maxheight"
:data="tableAll.tableData"
>
<el-table-column
v-if="tableAll.isShowIndex"
type="index"
label="序号"
:fixed="tableAll.indexFixed"
:index="indexMethod"
></el-table-column>
<el-table-column
v-if="tableAll.select"
type="selection"
width="55"
:fixed="tableAll.selectFixed"
></el-table-column>
<el-table-column
v-for="(col, index) in tableAll.cols"
:key="index"
:label="col"
:width="
tableAll.widthList && tableAll.widthList[index]
? tableAll.widthList[index]
: ''
"
:prop="tableAll.proplist[index]"
:fixed="tableAll.isFixed[index]"
>
<!-- 部分需要有插槽,并访问数据,部分不需要 -->
<template slot-scope="scope">
<slot :name="tableAll.proplist[index]" :obj="scope">{{
scope.row[tableAll.proplist[index]]
}}</slot>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="tableAll.isShowPage"
@size-change="handleSizeChange"
@current-change="changePage"
:current-page="tableAll.page"
:page-sizes="tableAll.pageList"
:page-size="tableAll.pageSize ? tableAll.pageSize : 50"
:layout="
tableAll.layoutList
? tableAll.layoutList
: 'total, sizes, prev, pager, next, jumper'
"
:total="tableAll.total ? tableAll.total : 0"
>
</el-pagination>
</div>
</template>
<script>
export default {
// cols proplist
props: {
tableAll: {
type: Object,
default: () => {
return {
// 表格
maxheight: 0,
tableData: [], // 表格数据
isShowIndex: true, // 序号
cols: [], // 表头
proplist: [], // 表格属性
isFixed: [], // 必传,否则会报错
select: false, // 是否有复选框
indexFixed: false,
selectFixed: false,
// 分页
isShowPage: true, // 显示分页
isShowSize: true, // 切换页数
page: 1, // 当前页
pageList: [], // 页数列表
pageSize: 50, // 每一个条数
total: 0, // 总条数
layoutList: "total, sizes, prev, pager, next, jumper" // 展示组件
};
}
}
},
data() {
return {};
},
methods: {
cellClass(obj) {
// classFun 绑定表格样式方法
if (
this.tableAll.classFun &&
typeof this.tableAll.classFun == "function"
) {
return this.tableAll.classFun(obj);
}
},
// 显示页数
indexMethod(val) {
return this.tableAll.isShowPage
? val + 1 + (this.tableAll.page - 1) * this.tableAll.pageSize
: val + 1;
},
handleSizeChange(val) {
// 切换size
this.$emit("changeSize", val);
},
changePage(val) {
// 切页
this.$emit("changePage", val);
},
// 点击行方法
clickRow(row, column, event) {
this.$emit("clickrow", {
row,
column,
event
});
},
// 点击列方法
cellClick(row, column, cell, event) {
this.$emit("cellclick", { row, column, cell, event });
},
// 切换选中行
handleSelectionChange(val) {
this.$emit("SelectionChange", val);
}
}
};
</script>
<style scoped>
.el-pagination {
text-align: center;
}
</style>
<style>
#tableCol .el-pagination {
background: rgba(255, 255, 255, 0.9);
}
</style>
组件引用部分:
<!-- table插件使用说明 -->
<!--
<table-col
@clickrow="clickRow"
@tablerow="tableRowClassName"
:tableAll="tableOpt">
// 如果表格列中需要插入插槽,如下 slot是对应的表格列属性
<template slot-scope="data" slot="FBA">
<el-button type="primary" @click="clicktable(data.obj.row)">{{
data.obj.row.FBA
}}</el-button>
</template>
</table-col>
-->
<-- js部分: -->
tableOpt: {
maxheight: 720,
tableData: [],
isFixed: [],
isShowPage: false,
cols: ["spu", "类型", "文件", "操作"],
proplist: ["1", "3", "4", "0"],
// 需要根据实际操作样式
classFun: function({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 7) {
let ks_days = this.tableData[rowIndex]["ks_days"];
if (ks_days < 60) {
return "green";
} else if (ks_days > 90) {
return "red";
} else {
return "yellow";
}
}
}
},
<-- html部分: -->
<table-col :tableAll="tableOpt">
<template slot-scope="data" slot="4">
{{ data.obj.row["4"]}}
</template>
<template slot-scope="data" slot="0">
{{data.obj.row['0']}}
</template>
</table-col>
结合el-form表单验证:
// addTableOpt : 组件表格数据
<el-form class="addTable" ref="addForm" :model="addTableOpt">
<table-col
@tablerow="addTableRowClassName"
@SelectionChange="AddSelectionChange"
:tableAll="addTableOpt"
>
<template slot-scope="scope" slot="propname">
// prop 不能直接写成 ‘propname’
<el-form-item
:prop="`tableData[${scope.obj.$index}]['propname']`"
:rules="rules['propname']"
>
<el-input v-model="scope.obj.row.propname"></el-input>
</el-form-item>
</template>
</table-col>
</el-form>
// rules 验证
propname: [
{ required: true, message: "propname不能为空", trigger: "blur" },
{
pattern: /^[1-9][0-9]*$/g,
message: "请输入大于0的整数",
trigger: "blur"
}
],
版权声明:本文为qq_33359745原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。