This is the fourth day of my participation in the August Text Challenge.More challenges in August

1. Encapsulate the El-Table component

<template> <div class="eltable"> <el-table ref="multipleTable"// Get the identity of the element :height="settings.height"// Table custom height V -loading="settings.isLoading" @selection-change="(e) => handleClick('select', E)"// This event is triggered when the selection changes highlight-current-row @current-change="handleCurrentChange"// start when the line changes @cell-click="handleCellclick"// Trigger the event when a cell is clicked @select="handleSelect"// select all="handleSelectall"// Selectall :data="data.list" style="width: 100%"// table width row-key="id" Expansion-row-keys ="settings.expandrowkeys"// Array to expand :indent="0"// expandrow shrink default-expansion-all // default to close expandrow :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"// Expand row Settings, children default to expand row > // Fixed checkbox column, </el-table-column V-if ="settings.isSelection" width="55" type="selection" fixed > IsIndex "type="index" :index="1" Fixed label=" fixed number" width="60" <template v-for="item in header"> <template V-if ="item.prop! == 'action' && item.column ! = true"> <el-table-column :key="item.prop" :type="item.type" :prop="item.prop" :label="item.label" :width="item.width" :fixed="item.fixed" :show-overflow-tooltip="true" ></el-table-column> </template> <template v-if="item.column == true"> // Slot :name="item.prop"></slot> </template> </template> // slot name="action"></slot> </el-table> < p style="text-align:right; padding:25px 15px 25px 0" @size-change="(e) => handleClick('pageSize', e)" @current-change="(e) => handleClick('currentPage', e)" :current-page="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="20" layout="total, sizes, prev, pager, next, Jumper ":total="settings.total" ></el-pagination> </div> </template> <script> Settings :{related configurations isLoading displays dynamic effect height table height autoHeight:true Indicates whether the height is automatically isSelection. IsIndex Specifies whether the sequence number is required. By default, no isBorder is required. IsPagination is added by default. CurrentPage number of pages} tableData: {tableData} tableHeader:{isTemplate isImagePopover tooltip} The handleClick parameter type specifies the type to be clicked, such as select, edit to show, delete to delete, and pageSize to delete. Number of current pages when paging is enabled currentPage when paging is enabled e Select item I Select index */ export default {name: "", data() {return {}; }, props: { data: { type: Object, default: () => {} }, header: { type: Array, required: true }, settings: { type: Object, default: () => { return { height: null, isBorder: true, isLoading: false, isIndex: false, isSelection: false, isPagination: false, currentPage: 1, total: 20, }; }, }, }, computed: { currentPage: function() { return this.settings.currentPage; }, }, mounted() {}, watch: { settings: { handler: function(e) { console.log(e); if (typeof e.isBorder === "undefined") e.isBorder = true; if (typeof e.total === "undefined") e.total = 20; }, immediate: True, 'Settings. Expandrowkeys' ()}, {/ / row accordion effect. Setting this data. The list. The map ((item) = > {the if (this. Settings. Expandrowkeys [0]! = item.id) { this.$refs.multipleTable.toggleRowExpansion(item, false) }else{ this.$refs.multipleTable.toggleRowExpansion(item) } }) } }, methods: { handleClick(type, e) { console.log(e); if (type == "select") { this.$emit("select", e); } else if (type == "pageSize") {$emit("pageSize", e);} else if (type == "pageSize") {$emit("pageSize", e); } else {this.$emit("currentPage", e); } }, handleCurrentChange(val) { this.$emit("currentChange", val); }, // handleCellclick(row, column, cell, Event) {/ / the following functions can contain parameters handleCellclick () {/ / selected switch / / this. $refs. MultipleTable. ToggleRowSelection (row); }, handleSelect(selection, row) {// check this.$emit("handleSelect", selection); }, handleSelectall(selection) {// select this.$emit("handleSelectall", selection); ,}}}; </script> <style scoped> // Close the native component expansion button. El-table. El-table__expansion-icon {display: none; } // Expand the row style individually. El-table__row --level-1{background-color:#F0EDFF; } // Cancel the row configuration. El-table__body tr. Current-row >td {background-color: # FFF! important; } </style>Copy the code

2. Component references

Import DspTable from "./.. /.. /.. /components/table.vue"; // Declare components: { DspTable }, <template> <div> < DSP-table :data="tableData" :header="dailyHeader" : Settings ="tableSettings" @currentPage="currentPage" @pagesize ="pageSize" > <template slot="clickPV"> <el-table-column prop="clickPV" <div class="det-msg">{{scope.row["clickTips"]}}</div> </template> </el-table-column> </template> // Customize column slot <template slot="action"> <el-table-column label=" action" align="right" Width ="120px" fixed="right" > <template slot-scope="scope"> <el-button V-if ="scope. Row ['children']" type="text" @click=" handleshowTable (scope.row['id'])" >{{ scope.row["click"] ? Pack up your plans: </el-button> </template> </el-table-column> </template> </ dSP-table > </div> </template> <script> export default  { components: { DspTable }, data() { return { tableData: { list: [] }, tableSettings: { isPagination: true, isLoading: true, total: 0, expandrowkeys: [], }, }; }, created() {}, mounted() {}, watch: {}, computed: {}, methods: { handleshowtable(id) { if (this.tableSettings.expandrowkeys[0] == id) { this.tableSettings.expandrowkeys = []; this.tableData.list.map((item) => { if (item.id == id) { item.click = false; }}); } else { this.tableSettings.expandrowkeys = [id + ""]; this.tableData.list.map((item) => { if (item.id == id) { item.click = true; } else { item.click = false; }}); } }, currentPage(page) { this.obj.pageNum = page; this.inittable(); }, pageSize(size) { this.obj.pageNum = "1"; this.obj.pageSize = size; this.inittable(); }}; </script>Copy the code