iview Table的样式，功能修改

在后台系统中经常用到的table跟iview的有较大区别
eg:

可选表格的，表头换成别的字符，不再是全选的checkbox
官网是这样的

我们怎么把它弄得符合设计呢，看代码

先看一下父组件怎么修改子组件的样式吧

<Table :columns='tableColums' :data='tableData' stripe id="tab_keyTag" ref="table" @on-selection-change='selectionChange'></Table>
    <section style="padding:20px 40px">
      <Checkbox @on-change='selectAll' v-model="isAll">全选</Checkbox>
      <Button @click="cancelKeyTag(selectedItem)" type="error" size="small" :disabled='hasSelected' style="margin-left:20px">批量取消重点标签</Button>
    </section>
通过样式 ，/deep/ 击穿修改表格的样式
<style scoped>
#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox {
  display: none;
  cursor: none;
}
#tab_keyTag /deep/ .ivu-table .ivu-table-header label:after {
  content: "选择";
}
#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox-wrapper {
  cursor: default;
  pointer-events: none; //这个很重要，禁用鼠标事件，不然就算把换了样式，还能点击全选
}
</style>

再通过这两个方法赋予全选跟官方的一样的功能
 //全选
    selectAll (flag) {
      this.$refs.table.selectAll(flag)
    },
    //勾选
    selectionChange (selected) {
      this.selectedItem = selected
      //和全选联动一下 （也就是选中的条数和分页大小或总数相等就全选）
      this.isAll = (selected.length === this.searchParams.total || selected.length === this.searchParams.pageSize) ? true : false
    }`