element-ul二次封装table表格

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>