element-ul二次封装table表格

在项目中el的表格使用的地方太多了，若不进行封装，使用的时候页面会显得非常的冗余且难以维护，有时表格样式还不能做到一致；今天分享一个在工作中封装的表格

由于大多代码都在页面有介绍，就不在外面解释了

一、表格的基本配置 tableConfig/homeTab.js （由于配置项数据比较多，就单独拿出来写）

/**

 * 首页表格配置项

 *

 * 完整配置

 *  prop  单元格数据（非特殊类型必填）

    label  单元格标题（非特殊类型必填）

    isImg  是否是图片类型

    type  类型

    width  宽度

    fixed 固定位置

    header-align 表头位置

    align  内容位置

 */

export const homeTabOpt = [

    {

        type: "selection", //单元格类型

        width: "60", //单元格宽度

        fixed: "left", //单元格固定的地方

        headerAlign: "center", //表头是否居中

        align: "center", //内容是否居中

    },

    {

        type: "expand", //单元格类型

        label: "折叠", //单元格标题

        width: "60", //单元格宽度

    },

    {

        type: "index", //单元格类型

        label: "索引", //单元格标题

        width: "60", //单元格宽度

    },

    {

        prop: "img", //单元格数据

        label: "头像", //单元格标题

        isImg: true,

    },

    {

        prop: "name", //单元格数据

        label: "姓名", //单元格标题

    },

    {

        prop: "date", //单元格数据

        label: "时间", //单元格标题

    },

    {

        prop: "address", //单元格数据

        label: "地址", //单元格标题

    },

];

二、表格封装 components/Table.js

封装时用到了作用于插槽，若没了解过的请先前往https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

<template>

  <div class="container">

    <!-- 操作按钮组 可包括搜索或其他操作-->

    <div class="btns">

      <el-button type="danger" @click="handleDeleteSel()">删除所选</el-button>

    </div>

    <!--

      表格 这里只封装了三种特殊情况

      1、图片类型

      2、文字类型

      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">

        <!-- 图片类型 item.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>

        <!-- 非图片类型 item.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="操作">

        <!-- 这里把操作的部分写在父组件 原因是可能有的表格需要的操作不一样 方便自定义 -->

        <template slot-scope="scope">

          <slot name="handle" :handleData="scope.row"></slot>

        </template>

      </el-table-column>

    </el-table>

    <!-- 分页 数据大于等于5条时使用分页-->

    <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: {

    //表格参数（为统一表格样式 这里一般使用默认配置 非特殊情况该项不用传参）

    tableOpt: {

      type: Object,

      default: function () {

        return {

          border: true, //是否需要边框

          stripe: false, //是否需要斑马纹

          tabStyle: { background: "#eef1f6", color: "#606266" }, //表格样式

        };

      },

    },

    //表格数据

    tableData: {

      type: [Array, Object],

      default: function () {

        return [];

      },

    },

    //表格配置参数

    tableColumnOpt: {

      type: Array,

      default: function () {

        return [

          {

            type: "selection", //单元格类型

            prop: "name", //单元格数据

            label: "", //单元格标题

            width: "60", //单元格宽度

            fixed: "left", //单元格固定的地方

            headerAlign: "center", //表头是否居中

            align: "center", //内容是否居中

          },

        ];

      },

    },

  },

  data() {

    return {

      //选择的列表

      selectList: null,

    };

  },

  components: {

    Pagination,

  },

  methods: {

    //选择的表格项

    handleSelectionChange(e) {

      this.selectList = e;

      this.$emit("handleSelection", e);

    },

    //删除所选

    handleDeleteSel() {

      if (this.selectList && this.selectList.length > 0) {

        this.$emit("handleDeleteSel");

      } else {

        this.$notify({

          title: "警告",

          message: "请选择需要操作的数据",

          type: "warning",

        });

      }

    },

    //分页 每页展示多少条数据

    handleSizeChange(opt) {

      this.$emit("handleSizeChange", opt);

    },

    //分页 当前页

    handlePageChange(opt) {

      this.$emit("handlePageChange", opt);

    },

  },

};

</script>

<style lang="less" scoped>

.container {

  padding: 0.2rem;

  .btns {

    margin-bottom: 0.1rem;

  }

}

</style>

三、页面使用

<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">

            操作

            <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)">添加</el-dropdown-item>

            <el-dropdown-item @click.native="handleChange(handleData.handleData)">修改</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"; //表格配置

export default {

  name: "home",

  data() {

    return {

      //表格配置

      tableColumnOpt: homeTabOpt,

      //表格数据

      tableData: tableData,

      //分页配置

      PagObj: { Index: 0, Count: 5 },

    };

  },

  components: {

    Table,

  },

  methods: {

    //选择的列表项

    handleSelection(opt) {

      console.log(opt);

    },

    //添加

    handleAdd(opt) {

      console.log(opt);

    },

    //修改

    handleChange(opt) {

      console.log(opt);

    },

    //分页 当前页

    handlePageChange(opt) {

      this.PagObj.Index = opt - 1;

      this.getDataList();

    },

    //分页 每页多少条数据

    handleSizeChange(opt) {

      this.PagObj.Count = opt;

      this.getDataList();

    }

  },

};

</script>

<style>

</style>

四、封装的分页也呈上

<template>

  <div class="container">

    <el-pagination

      background

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage"

      :page-sizes="[5, 10, 15, 20,30]"

      :page-size="100"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    ></el-pagination>

  </div>

</template>

<script>

export default {

  name: "mypagination",

  props: {

    //数据总数

    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>

巴特西

element-ul二次封装table表格

最新文章

热门文章