element-ui表格的二次封装

在使用element-ui的时候，虽说element官方的el-table组件已经至关好了，但针对的是因此群体，若是咱们在写后台系统的时候但愿更多的去封装已减小重复劳动。此次趁本身在写后台系统的时间来具体记录下如何去封装的。

分析element-ui官方的el-table组件

表格属性

首先须要分析出那些属性是项目中必须每次都须要的，这种属性适合默认值，若是不是必须的但又用到了的能够做为可配置项。根据本身的项目其实最经常使用的属性data、stripe，其它的属性你们能够根据本身的项目视具体状况而定。

表格方法

方法中在目前的项目中是没有使用到的，可是有一个应该是会有人用到的，sort-change

表格项的属性

表格的每一项的属性应该是最多的了，毕竟须要配置的也就是表格的每一项了，主要有label、prop、width、fixed、sortable、formatter、show-overflow-tooltip，其实这里根据本身的项目还须要加一个是否为图片的属性，毕竟表格里面显示图片仍是显示不下的须要使用其余组件来显示图片，暂定属性为isImg。

表格操做按钮

一般后台系统最后一列都须要一个操做，毕竟有不少数据时须要人工进行操做的，因此须要添加一些操做的按钮来对某一行数据进行操做。

定义想象的数据模型

根据上面的分享接下来咱们先把须要的数据或则是配置项定义下来，这样后面定义组件的时候就能够根据定义的数据或则配置项来生成表格的内容。

表格数据的属性

根据上面的分享表格数据的属性就两个data和stripe，这里须要外加一个loading，因此结构就像下面这样的：

<template>
  <div class="home">
      test
  </div>
</template>

<script>

export default {
  name: "home",
  data() {
    return {
      table: {
        stripe: false, //是否为斑马纹
        loading: false, // 数据加载loading
      }
    };
  },
  mounted() {}
};
</script>
复制代码

目前没有数据因此能够先关闭loading和stripe

接下来就是最重要的数据了，目前没有接口因此这里使用本身手动添加数据，也就是在table对象中添加data这样一个数组来保存表格的数据，以下：

data() {
    return {
      table: {
        stripe: false, //是否为斑马纹
        loading: false, // 数据加载loading
        data: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区江路 1518 弄"
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区江路 1517 弄"
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区江路 1519 弄"
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区江路 1516 弄"
          }
        ]
      }
    };
  }
复制代码

这样表格的属性也就差很少了。

表格的方法

表格的方法也就一个就是排序的，因项目中没有用到因此这里只是提供一个思路，具体实现的细节你们能够本身去补充，在table对象里面新添加一个event配置项以下：

event: {
	sortEvent: this.tableSort
}
复制代码

这里的tableSort就不具体写了，你们能够本身参考element-ui官方来写这个排序的查询。

表格每一项数据的属性

这个也是重点须要配置的，先定义几组数据模型，也就是在table对象中添加一个数组header用于表格的生成，以下：

header: [
          {
            prop: "selection",
            width: "55"
          },
          {
            prop: "date",
            label: "日期11"
          },
          {
            prop: "date",
            label: "日期11",
            width: "180",
            formatter: "",
            tooltip: false,
            sortable:false,
            fixed: "right"
          },
          {
            prop: "date",
            label: "日期11",
            width: "180",
            formatter: "",
            tooltip: false,
            sortable:false,
            isImg:false,
            fixed: "right"
          },
          {
            prop: "options",
            label: "操做",
            width: "180",
            fixed: "right"
          }
        ]
复制代码

数组中第一个和最后一个位置最好不要动，第一个是多选操做，最后一个是操做栏

表格数据的操做按钮

有了操做栏那么就须要有操做的按钮，先定义一个试试看，以下：

options: [
          {
            type: "success",
            label: "经过",
            event: this.submitBtn,
            isShow: item => {
              return item.status == 0 ? false : true;
            }
          }
        ]
复制代码

isShow为何时候显示该按钮，这里有一个回调来配置，须要返回一个布尔值

表格组件的定义

表格的基础数据定义好了就能够开始定义表格组件了，新建一个table组件，而后添加以下代码：

<template>
  <el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
      
  </el-table>
</template>

<script>
export default {
  props: {
    table: Object
  }
};
</script>
复制代码

这时候是看不到任何效果的，因此先在页面中引入该组件(上面生成数据的页面中)，接下来就是生成表格的内容了。

生成多选操做

多选操做在配置的时候就是prop的值为selection，因此直接在循环中判断便可，以下：

<template v-for="item in table.header">
        <el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
</template>
复制代码

效果以下：

生成列表项

列表项就是具体的表格项属性了，配置好基本上表格的数据也就能看到了，这里就不单个去说了，直接看最终代码吧：

<template>
  <el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
    <template v-for="item in table.header">
      <el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
      <template v-else-if="item.prop == 'options'">
        <template v-if="table.options.length">
          <el-table-column :label="item.label" :width="item.width" :fixed="item.fixed">
            <template slot-scope="scope">
              <template v-for="btn in table.options">
                <el-button
                  :type="btn.type"
                  v-if="btn.isShow ? btn.isShow(scope.row) : true"
                  @click="btn.event(scope.row)"
                >{{btn.label}}</el-button>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
      <template v-else>
        <template v-if="item.isImg">
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width">
            <template slot-scope="scope">
              <el-popover placement="left" trigger="click">
                <div>
                  <el-image
                    style="width: 300px; height: auto;"
                    :src="scope.row[item.prop]"
                    fit="contain"
                    slot="reference"
                  ></el-image>
                </div>
                <el-image
                  style="width: 100px;height: 100px;"
                  :src="scope.row[item.prop]"
                  fit="contain"
                  slot="reference"
                ></el-image>
              </el-popover>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter?item.formatter:null"
          :show-overflow-tooltip="item.tooltip?item.tooltip:false"
          :sortable="item.sortable?item.sortable:false"
          v-else
        ></el-table-column>
      </template>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    table: Object
  }
};
</script>
复制代码

修改初始数据

这个时候基本封装好了，对于刚开始的初始数据作以下修改便可：

<template>
  <div class="home">
    <my-table :table="table"></my-table>
  </div>
</template>

<script>
import myTable from "@/components/Table";

export default {
  name: "home",
  components: {
    "my-table": myTable
  },
  data() {
    return {
      table: {
        stripe: false, //是否为斑马纹
        loading: false, // 数据加载loading
        data: [
          {
            date: "2016-05-02",
            name: "王小虎",
            img:
              "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            address: "上海市普陀区江路 1518 弄"
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            img:
              "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            address: "上海市普陀区江路 1517 弄"
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            img:
              "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            address: "上海市普陀区江路 1519 弄"
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            img:
              "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
            address: "上海市普陀区江路 1516 弄"
          }
        ],
        event: {
          sortEvent: this.tableSort
        },
        header: [
          {
            prop: "selection",
            width: "55"
          },
          {
            prop: "date",
            label: "日期11",
            width: "180",
            formatter: ""
          },
          {
            prop: "name",
            label: "名称",
            tooltip: false,
            sortable: false
          },
          {
            prop: "img",
            label: "头像",
            width: "180",
            isImg: true
          },
          {
            prop: "address",
            label: "地址",
            width: "180",
            tooltip: true
          },
          {
            prop: "options",
            label: "操做",
            width: "200",
            fixed: "right"
          }
        ],
        options: [
          {
            type: "success",
            label: "经过",
            event: this.checkPass,
            isShow: item => {
              return item.status == 0 ? false : true;
            }
          },
          {
            type: "danger",
            label: "不经过",
            event: this.checkNoPass,
            isShow: item => {
              return item.status == 1 ? false : true;
            }
          }
        ]
      }
    };
  },
  methods: {
    tableSort(val) {
      console.log(val);
    },
    checkPass(val) {
      console.log(val);
    },
    checkNoPass(val) {
      console.log(val);
    }
  }
};
</script>
复制代码

效果以下：