elementui el-table 封装表格

ps:   1.3版本

案例：

完整代码：

可直接复制粘贴，但一定要全看完！

v-slot="scopeRows" 是vue3的写法；

vue2是 slot-scope="scope"

<template><!-- 简单表格、多层表头、页码、没有合并列行 --><div class="maintenPublictable"><!--cell-style 改变某一列行的背景色 --><!-- tree-props 配置树形子表row-click: 单击事件highlight-current-row:高亮选中某行default-expand-all：默认是否展开字列表current-change:管理选中时触发的事件selection-change：多选框row-key="id":    id：一定要跟后台返回来的id一致，不一致，会出错--><!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" --><el-tableref="table":data="tableData":height="getHeight"borderhighlight-current-row@selection-change="handleSelectionChange":key="itemKey":cell-style="tableCellStyle"@row-click="clickRow"row-key="ID":default-expand-all="defaultall":highlight-current-row="highlightCurrent"@current-change="handleCurrentChangeRow":tree-props="{ children: 'Children', }"><el-table-columntype="index"width="55"label="序号"></el-table-column><el-table-columntype="selection"v-if="isSelection"width="55"></el-table-column><!-- item.direction 方向，判断居中还是靠右 --><template v-for="(item, index) in tableHeader"><!-- 1. 这是第一层 --><!-- sortable: 排序 --><el-table-columnv-if="!item.Children":key="index":prop="item.prop":label="item.label"header-align="center":align="item.direction":min-width="item.width":sortable="item.sortable"><!--需封装动态展示并且适合多种输入  todo          --><templatev-slot="scopeRows"v-if="item.label === '在库数量'"><el-inputv-model="scopeRows.row.editRow.InStockQuantity"type="number"oninput="if(value<0)value=0"@blur="getRowData(scopeRows.row.editRow)"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '在库金额'"><el-inputv-model="scopeRows.row.editRow.InStockAmount"type="number"@blur="getRowData(scopeRows.row.editRow)"oninput="if(value<0)value=0"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '库位'"><el-selectv-model=" scopeRows.row.editRow.StoreLocationID"@change="getRowData(scopeRows.row.editRow)"><el-optionv-for="item in StorageLocation":key="item.ID":label="item.LocationName":value="item.ID"></el-option></el-select></template><templatev-slot="scopeRows"v-if="item.label === '风力发电有限公司1'"><el-inputv-model="scopeRows.row.Amount.Amount1"type="number"@blur="getRowData(scopeRows.row.Amount)":disabled=" (rowID!=scopeRows.row.SubjectsID && !this.disableD) || (rowID==scopeRows.row.SubjectsID && this.disableD) "oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '溪木源公司2'"><el-inputv-model="scopeRows.row.Amount.Amount2"type="number"@blur="getRowData(scopeRows.row.Amount)":disabled="rowID!=scopeRows.row.SubjectsID  "oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '大风车有限公司3'"><el-inputv-model="scopeRows.row.Amount.Amount3"type="number"@blur="getRowData(scopeRows.row.Amount)":disabled="rowID!=scopeRows.row.SubjectsID  "oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '新能源公司4'"><el-inputv-model="scopeRows.row.Amount.Amount4"type="number":disabled="rowID!=scopeRows.row.SubjectsID  "@blur="getRowData(scopeRows.row.Amount)"oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '定边风力公司5'"><el-inputv-model="scopeRows.row.Amount.Amount5"type="number"@blur="getRowData(scopeRows.row.Amount)":disabled="rowID!=scopeRows.row.SubjectsID  "oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><!-- 入库登记用到的   inWarehouseRow: 在给表格赋值时定义的。  --><templatev-slot="scopeRows"v-if="item.label === '购买数量'"><el-inputv-model="scopeRows.row.inWarehouseRow.Quantity"type="number"@blur="getRowData(scopeRows.row.inWarehouseRow)"oninput="value=value.replace(/^0|[^0-9]/g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '单价'"><el-inputv-model="scopeRows.row.inWarehouseRow.UnitPrice"type="number"@blur="getRowData(scopeRows.row.inWarehouseRow)"oninput="value=value.replace(/[^\d.]/g, '').replace(/^0+(\d)/, '$1').replace(/^\./, '0.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')"></el-input></template><templatev-slot="scopeRows"v-if="item.label === '操作'"><el-buttonlinktype="primary"size="small"color="#b0b1b3"class="handleClick_Btn"@click="handleClick(scopeRows.row)">保存</el-button></template></el-table-column><!-- 二级表头 --><el-table-columnv-else:key="index + 1":prop="item.prop":label="item.label":type="item.type":align="item.align || 'center'"><template v-for="(childItem, index) in item.Children"><!-- 三级表头 --><el-table-columnv-if="!childItem.Children":key="index":prop="childItem.prop":label="childItem.label"header-align="center":align="childItem.direction":min-width="childItem.width"></el-table-column><el-table-columnv-else:key="index + 1":prop="childItem.prop":label="childItem.label":type="childItem.type":align="childItem.align || 'center'"><template v-for="(childItem, index) in item.Children"><!-- 这是第三层 --><el-table-columnv-if="!childItem.Children":key="index":prop="childItem.prop":label="childItem.label"header-align="center":align="childItem.direction":min-width="childItem.width"></el-table-column><el-table-columnv-else:key="index + 1":prop="childItem.prop":label="childItem.label":type="childItem.type":align="childItem.align || 'center'"></el-table-column></template></el-table-column></template></el-table-column></template><!-- 表格最后一列是否是勾选框【完成情况】 --><el-table-columnv-if="isSelect"align="center"><templateslot="header"slot-scope="scope"><el-checkbox@change="allCheck(isAllcheck, tableData, ClickIdsList, isIndeterminate)"size="large"v-model="isAllcheck":indeterminate="isIndeterminate"></el-checkbox>完成情况</template><template slot-scope="scope"><!-- <el-button　@click="Ones(scope)">122333</el-button> --><el-checkbox@change="OnesClick(scope.row)"v-model="scope.row.check"class="ml-4"size="large"></el-checkbox></template></el-table-column></el-table><!--  分页 --><div v-if="showFenYe"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page.currentPage":page-sizes="[5, 10, 15, 20]":page-size="page.pagesize"layout="total, sizes, prev, pager, next, jumper":total="page.total"></el-pagination></div></div>
</template>
<script>
// import preventBack from "vue-prevent-browser-back"; //阻止返回
import { PublicFunction } from "@/utils/vuePublic";export default {name: "maintenPublictable",components: {},props: {// 接收的是：是否有分页、是否有勾选columns: {type: Object,default: {},},// 接收的是：页码pagination: {type: Object,default: {},},// 接收的是：传递过来的库位数据storageLocationSelect: {type: Array,default: [],},// 接收的是：传递过来的库位数据GoodsID: {type: Array,default: [],},// 接收的是：传递过来的计划编制的行点击的idSubjectsID: {type: Number,default: "",},},data() {return {tableHeader: [], //表头tableData: [], //数据itemKey: "",types: 1, //用于合并，判断是否需要合并//#region 与父组件关联getHeight: 20, //高度isSelect: false, //勾选框showFenYe: false, //是否有分页isSelection: false, //是否有多选框isTag: false, //是否有标签defaultall: false, //是否默认展开所有行（用于有树状结构的表格）highlightCurrent: false, //高亮选中//#endregion// 页码page: {currentPage: 1, //当前页pagesize: 5, //当前页的条数total: 20, //总数},//多选框multipleSelection: [],//#region 用于右侧的完成情况//选择isAllcheck: false, //全选ClickIdsList: [], //已选择集合组isIndeterminate: false, //部分选中，默认是false//#endregion,//仓库对应的库位数据StorageLocation: [],// //选中的行// 行idrowID: null,disableD: true,//#endregion};},// mixins: [preventBack], //注入  阻止返回上一页created() {},watch: {// 监听对象的写法（监听页码的变化）pagination: {handler(newValue, oldVal) {// console.log("监听111", oldVal);// console.log("监听222", newValue);this.page.total = newValue.total;},deep: true, // 深度监听// immediate: true, //写上它，初始化时也会调用监听},//接收库位的数据storageLocationSelect: {handler(n, o) {this.StorageLocation = n;},deep: true, // 深度监听immediate: true, //写上它，初始化时也会调用监听},},mounted() {this.init();// console.log(this.columns, "初始化：接收父组件传过来的值", this.pagination);},methods: {a(val, el) {console.log(val, "zheshi ", el);},Test(val) {console.log(val);},Ones(value) {console.log("12121212", value);},//在父组件初始化时，需要获得页码，所以子组件初始化时把页码传过去init() {let _this = this;_this.getHeight = this.columns.getHeight;_this.defaultall = this.columns.defaultall; //是否展开所有行_this.isSelect = this.columns.isSelect; //右侧的完成情况_this.isTag = this.columns.isTag; //是否有标签_this.showFenYe = this.columns.showFenYe;_this.isSelection = this.columns.isSelection; //左侧的多选框_this.highlightCurrent = this.columns.highlightCurrent; //高亮选中_this.page.total = this.pagination.total;_this.$emit("getPage", {data: {pageSize: _this.page.pagesize,pageNum: _this.page.currentPage,isTypes: 1,},});// //每次使用就调一次// this.SetDataTableHeader()this.rowID = null;},//一页有多少条数据handleSizeChange(val) {let _this = this;_this.page.pagesize = val;// 子传父_this.$emit("getPage", {data: {pageSize: _this.page.pagesize,pageNum: _this.page.currentPage,isTypes: 2,},});},//第几页/切换页码handleCurrentChange(val) {let _this = this;_this.page.currentPage = val;_this.$emit("getPage", {data: {pageSize: _this.page.pagesize,pageNum: _this.page.currentPage,isTypes: 2,},});},//表头SetDataTableHeader(GetDataLists) {//重新渲染，itemKey用于处理Table不渲染的问题this.itemKey = Math.random();//重新渲染数据表this.tableHeader = GetDataLists;// console.log("表头", this.tableHeader);// this.$forceUpdate()},//table值SettableData(tabledata, flag) {// console.log(tabledata, "tabledata");let _this = this;_this.tableData = tabledata;// console.log("接收父组件传过来的表格数据", tabledata);this.tableData.forEach((item, index) => {//仓库初始化编辑item.editRow = {InStockQuantity: "", //在库数量InStockAmount: "", //在库金额StoreLocationID: "", //库位};/**1是编辑，0是新增 */if (flag == 1) {item.inWarehouseRow = {Quantity: item.Quantity,UnitPrice: item.UnitPrice,};} else if (flag == 0) {item.inWarehouseRow = {Quantity: "",UnitPrice: "",};}//如果flag为true的情况下，是编辑，进行赋值， 为false是新增if (flag == true) {//计划编制的字段item.Amount = {Amount1: item.Amount1,Amount2: item.Amount2,Amount3: item.Amount3,Amount4: item.Amount4,Amount5: item.Amount5,};} else {item.Amount = {Amount1: "",Amount2: "",Amount3: "",Amount4: "",Amount5: "",};}});},//左侧：多选框handleSelectionChange(val) {this.multipleSelection = val;// console.log("左侧：勾选数据", this.multipleSelection);this.$emit("handleSelectionChange", val);},//#region 下面这个是用于最右侧的完成情况//全选 调取公共js文件的方法allCheck(isAll, tableData, checkList, isCheck) {//接收传过来的值let objData = PublicFunction.allCheck(isAll,tableData,checkList,isCheck);this.isAllcheck = objData.isAll;this.ClickIdsList = objData.checkList;},//单行选择OnesClick(rows) {if (rows.check) {this.ClickIdsList.push(rows.id);} else {let index = this.ClickIdsList.indexOf(rows.id);this.ClickIdsList.splice(index, 1);}// console.log("勾选111", this.ClickIdsList);this.isIndeterminate =this.ClickIdsList.length > 0 &&this.ClickIdsList.length < this.tableData.length;this.isAllcheck = this.ClickIdsList.length == this.tableData.length;},//#endregion// 合并单元格objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData, types) {if (types === 1) {switch (columnIndex // 将列索引作为判断值) {// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）case 2:return PublicFunction.MergeCol(tableData, "itemDetail", rowIndex);case 1:return PublicFunction.MergeCol(tableData, "item", rowIndex);}} else {//保障作业switch (columnIndex) {case 1:return PublicFunction.MergeCol(tableData, "item", rowIndex);}}//判断检查内容是否为空// if (//   tableData[columnIndex].checkContent != undefined ||//   tableData[columnIndex].checkContent != null// ) {// } else {// }},// 提交（在父组件点击提交时调用这个方法）childSumbit() {// console.log(//   "子组件提交",//   this.tableData,//   this.ClickIdsList,//   this.multipleSelection// );let param = {tabledata: this.tableData,ClickIdsList: this.ClickIdsList,multipleSelection: this.multipleSelection,};// 把值传给父组件this.$emit("sumbitData", param);},//行点击事件clickRow(row, column, event) {// let _this = this;// _this.$router.push({//   name: "equipSchedule", //路由名称//   params: {//     data: row, //参数//   },// });this.rowID = row.SubjectsID;this.$emit("rowClick", row);},// 行选中时间handleCurrentChangeRow(val) {this.$emit("handleCurrentChangeRow", val);},// 改变某一列的行的背景色tableCellStyle({ row, column, rowIndex, columnIndex }) {// console.log("背景色：");// console.log("row===:", row);// console.log("column===:", column);// console.log("rowIndex===:", rowIndex);// console.log("columnIndex===:", columnIndex);//如果是第一列if (columnIndex === 1) {//如果这一行的字段==未维护if (row.state == "未维护") {// 如果是未维护——背景色浅蓝色，字体色蓝色；return "background:#ecf5ff; color:#409eff";} else if (row.state == "已维护") {// 如果是已维护——背景色绿色，字体色白色；return "background:#67c23aa6;color:#fff ";} else if (row.state == "部分维护") {// 如果是已维护——背景色棕色，字体色白色；return "background:#e6a23cab;color:#fff ";} else {}} else {}},//获取行内编辑的数据getRowData(val) {console.log(val, "获取行内编辑的数据");this.$emit("getEditRow", val);},/*** 操作列*/handleClick(val) {// console.log(val, "操作列");this.$emit("getclickRow", val);},},//#endregion
};
</script><style scoped>
.maintenPublictable ::v-deep .el-table th,
::v-deep .el-table thead.is-group th.el-table__cell {background: linear-gradient(147deg, #70c0ff, #2f9fff);color: #fff;padding: 0;margin: 0;
}/*****滚动条影藏 */::v-deep .el-table--scrollable-y ::-webkit-scrollbar {display: none !important;
}/**lable名字 */
::v-deep .el-checkbox__label {color: #fff;
}::v-deep .el-table__header {height: 4rem;
}
/*按钮样式 */
/* ::v-deep .el-button:hover,
::v-deep .el-button:focus {color: #f3f3f3 !important;font-weight: bold;
} */
</style>