Table组件

因为正常需求来说表格都会带翻页，所以我就直接在一个组件里面做好了

<div class="table">
    <!-- 表格开始 -->
    <el-table
      ref="table"
      v-loading="loading"
      element-loading-text="加载中"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @sort-change="handleSortChange"
    >
      <!-- prop是对应列内容的字段名 width是对应列宽度 sortable是是否排序 label是对应列名称 -->
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.param"
        :width="item.width ? item.width : ''"
        :sortable="item.sortable ? true : false"
        :label="item.label"
      >
      <!-- 因为有些参数需要判定比如性别所以判断一下 -->
        <template slot-scope="scope">
          <span v-if="item.render">
            {{ item.render(scope.row) }}
          </span>
          <span v-else>{{ scope.row[item.param] }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        v-if="tableOption.label"
        :label="tableOption.label"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in tableOption.options"
            :key="index"
            :type="item.type"
            :icon="item.icon"
            @click="handleButton(item.methods, scope.row, scope.$index)"
            size="mini"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 翻页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>

JS 和 CSS

<script>
export default {
  props: {
    loading: {
      // 预加载
      type: Boolean,
      default: false
    },
    tableData: {
      // 表格数据
      type: Array,
      default: () => {
        return [];
      }
    },
    tableColumns: {
      // 表头数据
      type: Array,
      default: () => {
        return [];
      }
    },
    tableOption: {
      // 表格操作
      type: Object,
      default: () => {
        return {};
      }
    },
    page: {
      // 当前页
      type: Number,
      default: () => {
        return 1;
      }
    },
    rows: {
      // 当前页展示数
      type: Number,
      default: () => {
        return 20;
      }
    },
    total: {
      // 总数
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  methods: {
    // 切换当前一页展示多少条
    handleSizeChange(val) {
      this.$emit("sizeChange", val);
    },
    // 翻页
    handleCurrentChange(val) {
      this.$emit("pageChange", val);
    },
    // 按钮点击事件
    // methods方法名 row当前点击列数据 index当前点击的index
    handleButton(methods, row, index) {
      this.$emit("clickButton", { methods: methods, row: row, index: index });
    },
    // 点击排序
    handleSortChange(val) {
      this.$emit("sortChange", val);
    }
  }
};
</script>

<style lang="less">
.table {
  margin-top: 10px;
}
.el-table {
  margin: 10px 0;
  & td,
  & th {
    text-align: center;
  }
}
.el-pagination {
  text-align: right;
}
</style>

使用组件方法

1.先引入组件

// 我是配置好了components 没配置的url则是 @/components/table
import Table from "components/table";

2.模板中使用组件

<Table
      :tableData="tableData"
      :tableColumns="tableLabel"
      :page="page"
      :rows="rows"
      :total="total"
      :loading="loading"
      :tableOption="tableOption"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
      @clickButton="clickButton"
      @sortChange="sortChange"
    ></Table>

3.对应data数据

data() {
  return() {
     loading: false,
     page: 1,
     rows: 20,
     total: 100,
     // 表头数据
     tableLabel: [
       {
         label: "姓名",
         param: "name"
       },
       {
         label: "性别",
         param: "sex",
         render: row => {
           if (row.sex === 0) {
             return "女";
           } else if (row.sex === 1) {
             return "男";
           }
         }
       },
       {
         label: "地点",
         param: "address"
       },
       {
         label: "时间",
         sortable: true,
         param: "date"
       }
     ],
     // 表格操作
     tableOption: {
       label: "操作",
       options: [
         {
           label: "删除",
           type: "danger",
           icon: "el-icon-delete",
           methods: "del"
         }
       ]
     },
     // 表格数据
     tableData: [
       {
         date: "2016-05-02",
         name: "王小虎",
         address: "上海市普陀区金沙江路 1518 弄",
         sex: 0
       },
       {
         date: "2016-05-04",
         name: "王小虎",
         address: "上海市普陀区金沙江路 1517 弄",
         sex: 1
       },
       {
         date: "2016-05-01",
         name: "王小虎",
         address: "上海市普陀区金沙江路 1519 弄",
         sex: 0
       },
       {
         date: "2016-05-03",
         name: "王小虎",
         address: "上海市普陀区金沙江路 1516 弄",
         sex: 1
       }
     ]
  }
}

3.使用组件对应方法

methods: {
    // 切换当前一页展示多少条
    sizeChange(val) {
      this.rows = val;
      console.log(`每页 ${val} 条`);
    },
    // 翻页
    pageChange(val) {
      this.page = val;
      console.log(`当前页: ${val}`);
    },
    // 点击事件
    clickButton(val) {
      // 调用事件
      this[val.methods](val.row);
    },
    // 排序
    sortChange(val) {
      console.log(val);
    },
    del(val) {
      // 我是删除
      console.log(val);
    }
  }