Element-ul Encapsulates the table twice

/** * Home table Configuration item ** Complete configuration * prop Cell data (not required for special types) label Cell title (not required for special types) isImg Whether image type type Width Width Fixed fixed position header-align */ export const homeTabOpt = [{type: "selection", // width: "60", // fixed: Align: "center" align: "center", // content center}, {type: "expand", // cell type label: "Fold", / / cell header width: "60", / / cell width}, {type: "index", / / cell type label: "index", / / cell header width: "60", / / cell width}, {prop: IsImg: true,}, {prop: "name", // prop: "name", // prop: "name", // prop: "name", // prop: "name", // prop: "name", // "Date", / / cell data label: "time", / / cell title}, {prop: "address", / / cell data label: "address", / / cell title},];Copy the code

<template> <div class="container"> <! > <div class=" BTNS "> <el-button type="danger" @click="handleDeleteSel()"> This table only encapsulates three special cases: 1. Image type 2. Text type 3. <el-table :data=" tabledata. data" :stripe=" tableopt. stripe" :border=" tableopt. border" ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="tableOpt.tabStyle" style="width: 100%" :tree-props="{children: 'list'}" > <div v-for="(item,index) in tableColumnOpt" :key="index"> <! IsImg => true--> <el-table-column v-if=" item.isimg && item.type! == 'expand'" :type="item.type" :prop="item.prop" :label="item.label" :width="item.width" :fixed="item.fixed" :header-align="item.headerAlign || 'center'" :align="item.align || 'center'" show-overflow-tooltip > <template slot-scope="scope"> <el-image style="width: 120px; height: 100px" :src="scope.row[item.prop]" fit="contain"></el-image> </template> </el-table-column> <! IsImg => false--> <el-table-column v-if="! item.isImg && item.type ! == 'expand'" :type="item.type" :prop="item.prop" :label="item.label" :width="item.width" :fixed="item.fixed" :header-align="item.headerAlign || 'center'" :align="item.align || 'center'" show-overflow-tooltip ></el-table-column> <! --> <el-table-column v-if="item.type == 'expand'" :type="item.type" :prop="item.prop" :label="item.label" :width="item.width" :fixed="item.fixed" :header-align="item.headerAlign || 'center'" :align="item.align || 'center'" show-overflow-tooltip > <template slot-scope="scope"> <slot name="expand" :child="scope.row"></slot> </template> </el-table-column> </div> <! <el-table-column width="130" align="center" fixed="right" label=" operation "> <! <template slot-scope="scope"> <slot name="handle" :handleData="scope.row"></slot> </template> </el-table-column> </el-table> <! --> <Pagination :total=" tabledata. total" v-if=" tabledata. total >= 5" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" /> </div> </template> <script> import Pagination from "@/components/element/Pagination"; // export default {name: "mytable", props: {// Table parameter (for a unified table style, the default is used) {type: Object, default: function () {return {border: true, // Whether stripe is required: false, // Whether zebra stripe is required tabStyle: {background: "#eef1f6", color: "#606266"}, // table style}; },}, // tableData: {type: [Array, Object], default: function () {return []; },}, tableColumnOpt: {type: Array, default: function () {return [{type: "selection", // cell type prop: "Name ", // cell data label: "", // cell title width: "60", // cell width fixed: "left", // cell fixed place headerAlign: Align: "center" align: "center" align: "center"},]; },},}, data() {return {// selectList: null,}; }, components: {Pagination,}, methods: {handleSelectionChange(e) {this.selectList = e; this.$emit("handleSelection", e); }, // Delete the selected handleDeleteSel() {if (this.selectList && this.selectList.length > 0) {this.$emit("handleDeleteSel"); } else {this.$notify({title: "warning", message: "please select the data you want to work on ", type: "warning",}); HandleSizeChange (opt) {this.$emit("handleSizeChange", opt); }, // paging current page handlePageChange(opt) {this.$emit("handlePageChange", opt); ,}}}; </script> <style lang="less" scoped>. Container {padding: 0.2rem; The BTNS {margin - bottom: 0.1 rem; } } </style>Copy the code

<template> <div class="animated bounceInDown"> <! <Table :tableData="tableData" :tableColumnOpt="tableColumnOpt" @handlesElection ="handleSelection" @handlePageChange="handlePageChange" @handleSizeChange="handleSizeChange" > <! --> <template slot="expand" slot-scope="child">{{child}}</template> <! <template slot="handle" slot-scope="handleData"> <el-dropdown> <el-button type="primary"> Operation < I class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="handleAdd(handledata.handleData)"> add </el-dropdown-item> <el-dropdown-item @click.native="handleChange(handledata.handleData)"> Modify </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template>  </Table> </div> </template> <script> import Table from "@/components/element/Table"; import { tableData } from "@/utils/datas"; Import {homeTabOpt} from ".. /.. /tableConfig/homeTab"; // table configuration export default {name: "home", data() {return {tableColumnOpt: homeTabOpt, // tableData: TableData, // PagObj: {Index: 0, Count: 5},}; }, components: {Table,}, methods: {// Select the list item handleSelection(opt) {console.log(opt); }, // Add handleAdd(opt) {console.log(opt); }, // Modify handleChange(opt) {console.log(opt); }, // page current page handlePageChange(opt) {this.pagobj.index = opt-1; this.getDataList(); HandleSizeChange (opt) {this.pagobj.Count = opt; this.getDataList(); }}}; </script> <style> </style>Copy the code

<template> <div class="container"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, ":page-size="100" layout="total, sizes, prev, pager, next," jumper" :total="total" ></el-pagination> </div> </template> <script> export default { name: "mypagination", props: {// Total Number of data total: {type: Number, default: 100,}, // currentPage: {type: Number, default: 1, }, }, data() { return {}; }, methods: {handleSizeChange(val) {this.$emit("handleSizeChange", val); HandleCurrentChange (val) {this.$emit("handlePageChange", val); ,}}}; </script> <style lang="less" scoped> .container { text-align: center; } </style>Copy the code