表格封装使用

      <myfrom
        :roleList="goodList"   //表格内容接收数据
        :columns="columns"    //表格的配置项
        :expandOptions="expandOptions"  //是否展开行 
        @handleSizeChange="handleSizeChange"  //每页 val 条点击事件 （分页）
        @handleCurrentChange="handleCurrentChange"  //当前页：val （分页）
        :total="total"   //分页总内容（分页）
        :pageSize="pagesize"   //每页多少条数据（默认10条）
        :currentPage="pagenum"      //第几页（默认为第一页）
        :showPaging="showPaging"   //是否展示分页 （默认为true）
        :indexOptions="indexOptions"  //表格索引配置
        :table="table"    //table配置（表格效果配置）
      >
        <template v-slot:state="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editor(scope.scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delGood(scope.scope.row)"
          ></el-button>
        </template>
      </myfrom>

配置

表格的列配置项

return{
      columns: [
        {
          label: "商品名称", //表格头
          prop: "goods_name", //绑定单个数据的名字
          align: "center", //表格显示方式
          width: "800", //宽度
        },
        {
          label: "商品价格(元)",
          prop: "goods_price",
          align: "center",
        },
        {
          label: "商品重量",
          prop: "goods_weight",
          align: "center",
        },
        {
          label: "创建时间",
          align: "center",
          prop: "add_time",
        },
        {
          label: "操作",
          align: "center",
          slots: "state", //2.没有绑定数据名，此为插槽名(用于父组件操作)(参数scope)
        },
         {
          label: "展示",
          align: "center",
          prop: "show", //如果绑了一起slots，prop（次列为自定义插槽，插槽名字为slots中定义的名字）
          slots: "state", 
        },
      ],
    }

分页配置

return{
      pagesizes: [5, 10, 20, 30],
      pagesize: 10, //每页显示条数
      pagenum: 1, //当前页码
      //是否展示分页
      showPaging: true,
}

索引配置

return{
//表格配置
      indexOptions: {
        label: "#",  //索引表头标题
        align: "center", //内容显示方式
        indexMethod: 0,  //从几开始
        showIndex: true,  //是否展示索引
      },
}

table配置

return{
  table: {
        stripe: true, //是否创建带斑马纹
        border: true,//是否需要竖直方向的边框
        size: "medium",//Table 的尺寸medium / small / mini
      },
}

是否展开行

return{
   expandOptions: true, //插槽类名为expand 可自由搭配
   }

封装内容

<template>
  <div>
    <el-table
      :data="roleList"
      :border="table.border"
      :stripe="table.stripe"
      :size="table.size "
      :row-key="table.rowkey"
      v-loading="!roleList.length"
      :tree-props="table.treeprops"
    >
      <!-- 展示索引条件(需要传入索引的配置对象) -->
      <el-table-column
        type="index"
        :label="indexOptions.label"
        :align="indexOptions.align"
        :width="indexOptions.width"
        :index="indexOptions.indexMethod"
        v-if="indexOptions"
      ></el-table-column>
      <el-table-column type="expand" v-if="expandOptions">
        <template slot-scope="scope">
          <slot name="expand" :scope="scope"></slot>
        </template>
      </el-table-column>
      <!-- 展示表头条件(需要传入表头的配置对象) -->
      <template v-for="(item,index) in columns">
        <!-- 索引展示 -->
        <el-table-column
          v-if="item.prop"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
          :key="index"
        >
          <template slot-scope="scope">
            <slot v-if="item.slots" :name="item.slots" :scope="scope"></slot>
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :align="item.align"
        >
          <!-- 操作按钮插槽 -->
          <template slot-scope="scope">
            <slot :name="item.slots" :scope="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页展示 -->
    <div v-if="showPaging" class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  //接受父组件传递的数据
  props: {
    expandOptions: {
      type: Boolean,
    },
    //table展示全部配置
    table: {
      type: Object,
    },
    //索引展示全部配置
    indexOptions: {
      type: Object,
    },
    //表格内容接收数据
    roleList: {
      type: Array,
      required: true,
    },
    //表格的配置项
    columns: {
      type: Array,
      required: true,
    },
    //分页总内容
    total: {
      type: [Number, String],
      default: 0, //默认值
    },
    //是否展示分页
    showPaging: {
      type: Boolean,
      default: true,
    },
    //第几页
    currentPage: {
      type: [Number, String],
      default: 1,
    },
    //选择每页的数据数量
    pageSizes: {
      type: Array,
      default: () => [5, 10, 20, 30], // ***重点(接受数组要写成返回值形式)***
    },
    //默认每页多少条数据
    pageSize: {
      type: [Number, String],
      default: 10,
    },
  },
  //注册组件
  components: {},
  data() {
    return {};
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
  },
  mounted() {},
  watch: {},
  computed: {},
};
</script>

<style scoped lang='scss'>
.paging {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>