在后台系统中经常用到的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
}`