iview Table的样式，功能修改

淡淡的烟草味﹌ 2021-09-17 02:56 846阅读 0赞

在后台系统中经常用到的table跟iview的有较大区别  
eg:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
可选表格的，表头换成别的字符，不再是全选的checkbox  
官网是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
我们怎么把它弄得符合设计呢，看代码

先看一下父组件怎么修改子组件的样式吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]

<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
        }`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/8554cd44a8564da2930960e367a3c4af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210813/dd0e91c9bac744c1914f029052da1147.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 2]: /images/20210813/903ab8b691114375aa5412203f5154a3.png