基于Element 封装table组件

基于Element 封装table组件

封装自己的小组件是很有用的，不用重复的造轮子或者复制代码，网上的例子都是只说一半而且还是老是出错；今天我保姆式教学

一）在父组件中引用这个组件

<template>
    <Table :options="options" ref="child"></Table>
</template>

在js中导入这个组件

import Table from "@/components/Table";

在父组件中开始最重要的的部分了就是设置你想要的列和格式

scope是在特殊列数，比如给某列显示图片啊 添加图标啊 等等 我这里没有显示图片 就没有写 （如果需要就可以 模仿的造用轮子 就可以了）

data(){
const options = {
      isSearch: true,
      columns: [
        { prop: "name", label: "姓名", scope: "isIcon" },
        { prop: "title", label: "xx" },
        { prop: "sourceName", label: "xx" },
        { prop: "className", label: "xx" },
        { prop: "valueName", label: "xx" },
        { prop: "editnum", label: "xxx" },
        { prop: "update_time", label: "xx", formatter: "time" },
        { prop: "status", label: "状态", scope: "status" },
        { prop: "actions", label: "操作", scope: "actions" },
      ],
      operation: {
        // 表格有操作列时设置
        label: "操作", // 列名
        width: "120", // 根据实际情况给宽度
        data: [
          // 功能数组
          {
            label: "查看", // 操作名称
            type: "primary",
            icon: "el-icon-edit",
            action: "lookTopic",
            handleRow: this.handleRow,
          },
          {
            label: "通过", // 操作名称
            type: "danger", //为element btn属性则是按钮
            icon: "el-icon-check",
            action: "carryTopic",
            handleRow: this.handleRow,
          },
        ],
      },
      tableData: [], // 表格数据
      tableTotal: 0,  //条数
      loading: true,  //数据加载中
      drawer: true, //用户详情抽屉
      urlaction: "datacheck",   //请求的地址url
    },
     return {
      options,
      },
      methods:{
   //这里是子级调用父级的方法。
    handleRow(id, lable) {
      switch (lable) {
        case "lookTopic":
          this.showEditDilog(id);
          break;
        case "delete":
          this.removeStuById(id);
          break;
        default:
          return this.$message.error("获取参数出错!");
      }
    }

好了现在设置好了 父组件 现在该去配置子组件

<el-table
      :data="options.tableData"
      border
      class="tableBox"
      v-loading="options.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column type="index" label="#" width="55" align="center" />
      <template v-for="column in options.columns">
        <el-table-column
          v-if="!column.scope"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :with="column.width"
          :formatter="column.formatter === 'time' ? formatterTime : null"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-else
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          align="center"
        >
          <!--眼睛图片-->
          <template slot-scope="scope">
            <template v-if="column.scope === 'isIcon'">
              <span style="width: 70px; display: inline-block">{{
                scope.row.stu_name
              }}</span>
              <i
                class="el-icon-view"
                style="color: #409eff"
                @click="drawerstuInfo(scope.row)"
              ></i>
            </template>
            <template v-if="column.scope === 'noIcon'">
              <span style="width: 70px; display: inline-block">{{
                scope.row.stu_name
              }}</span>
            </template>

            <!--男女状态-->
            <template v-else-if="column.scope === 'sexStatus'">
              <el-tag v-if="scope.row.stu_sex == 1" type="warning" size="mini"
                >男</el-tag
              >
              <el-tag v-else size="mini" effect="plain">女</el-tag>
            </template>

            <!-- 状态列 -->
            <template v-else-if="column.scope === 'status'">
              <el-tag :type="statusType(scope.row.status)" size="mini">{{
                statusText(scope.row.status)
              }}</el-tag>
            </template>

            <!--操作-->
            <template v-else-if="column.scope === 'actions'">
              <div class="btn">
                <span v-for="item in options.operation.data" :key="item.label">
                  <div style="width: 40px; display: inline-block; margin: auto">
                    <el-tooltip effect="dark" placement="top" :enterable="false"
                      ><span slot="content">{{ item.label }}</span>
                      <el-button
                        size="mini"
                        :icon="item.icon"
                        :type="item.type"
                        circle
                        @click.enter.prevent="
                          item.handleRow(scope.row.Id, item.action)
                        "
                      >
                      </el-button>
                    </el-tooltip>
                  </div>
                </span>
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>

//分页区域
 <el-pagination
      v-if="pageData"
      style="margin-top: 5px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="queryInfo.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="options.tableTotal"
    >
    </el-pagination>

下面啊是js代码

export default {
  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      pageData: true,
      drawerStatus: false,
      tableData: [],
      queryInfo: {
        //搜索功能
        query: "",
        //当前页数
        page: 1,
        //当前每页显示多少条数据
        page_size: 5,
        //获取数据类型  0 表示为通过审核  1 通过审核
        type: this.options.Datatype,
        year: sessionStorage.getItem("year"),
      },
      //数据总和
      tableTotal: 0,
      //抽屉数据
      drawerData: [],
    };
  },
  computed: {
    statusType() {
      return function (val) {
         if (val === 12) { 
          //主要按钮
          return 'primary'
        } else if (val ===  11) {
          //成功按钮
          return 'success'
        }else if(val === 0){
          //信息按钮
          return "info"
        }else if(val === 13){
          //警告按钮
          return "warning"
        }else{
          //危险按钮
          return "danger"
        }
      };
    },
    statusText() {
      return function (val) {
       switch(val){
         case 0:
           return '暂无数据'
          case 11:
           return '通过'
          case 12:
           return '未通过'
          case 13:
            return  '未审阅'
       }
      };
    },
  },
  created() {
    this.gettableData();
  },
  methods: {
    //获取数据
    async gettableData() {
      //    this.statuslist =JSON.parse(sessionStorage.getItem("status"));
      //    console.log(this.statuslist)
      let that = this;
      await that.$http
        .get(this.options.urlaction, { params: that.queryInfo })
        .then((res) => {
          this.options.loading = false;
          if (res.code !== 200) {
            that.options.tableData = [];
            that.pageData = false;
            return;
          }
          that.options.tableData = res.data;
          that.options.tableTotal = res.total;
        });
    },
    //时间格式转化
    formatterTime(row, column, cellValue) {
      cellValue = cellValue.substring(0, 10);
      return cellValue;
    },
    //监听pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.page_size = newSize;
      this.queryInfo.page = 1;
      this.gettableData();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.gettableData();
    },
  },
   drawerstuInfo(id) {
      this.drawerData = id;
      this.drawerStatus = true;
    },
};

好了，到此结束 就是这么简单
那就来看看效果图吧

版权原因 不能公布一些东西