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"
      >
      <!-- 因為有些參數(shù)需要判定比如性別所以判斷一下 -->
        <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: {
      // 表格數(shù)據(jù)
      type: Array,
      default: () => {
        return [];
      }
    },
    tableColumns: {
      // 表頭數(shù)據(jù)
      type: Array,
      default: () => {
        return [];
      }
    },
    tableOption: {
      // 表格操作
      type: Object,
      default: () => {
        return {};
      }
    },
    page: {
      // 當前頁
      type: Number,
      default: () => {
        return 1;
      }
    },
    rows: {
      // 當前頁展示數(shù)
      type: Number,
      default: () => {
        return 20;
      }
    },
    total: {
      // 總數(shù)
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  methods: {
    // 切換當前一頁展示多少條
    handleSizeChange(val) {
      this.$emit("sizeChange", val);
    },
    // 翻頁
    handleCurrentChange(val) {
      this.$emit("pageChange", val);
    },
    // 按鈕點擊事件
    // methods方法名 row當前點擊列數(shù)據(jù) 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數(shù)據(jù)

data() {
  return() {
     loading: false,
     page: 1,
     rows: 20,
     total: 100,
     // 表頭數(shù)據(jù)
     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"
         }
       ]
     },
     // 表格數(shù)據(jù)
     tableData: [
       {
         date: "2016-05-02",
         name: "王小虎",
         address: "上海市普陀區(qū)金沙江路 1518 弄",
         sex: 0
       },
       {
         date: "2016-05-04",
         name: "王小虎",
         address: "上海市普陀區(qū)金沙江路 1517 弄",
         sex: 1
       },
       {
         date: "2016-05-01",
         name: "王小虎",
         address: "上海市普陀區(qū)金沙江路 1519 弄",
         sex: 0
       },
       {
         date: "2016-05-03",
         name: "王小虎",
         address: "上海市普陀區(qū)金沙江路 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);
    }
  }

最后附上成品圖

二次封裝表格組件

可能是我顯示有點問題。我這邊看不到邊框。不過影響不大。