技術標籤：vueelementuiicons

1.iconfont icon-shousuo和iconfont icon-list-collapse圖示自行替換

<el-table-column prop="name" label="序號">
	<template slot-scope="scope">
		<span @click="handleIconToggle(scope.row)" style="cursor: pointer">
			<
 
i :ref="'myicon'+scope.row.id" class="iconfont icon-list-collapse" v-show="scope.row.children != null && scope.row.children.length != 0"></i>
			{{ scope.$index + 1 }}
		</span>
	</template>
</el-table-column>

2.切換方法

//點選table展開收起
handleIconToggle
 
(row) {
    this.$refs.topicTable.toggleRowExpansion(row);
    if(this.$refs['myicon'+row.id].getAttribute('class') == 'iconfont icon-list-collapse'){
        this.$refs['myicon'+row.id].setAttribute('class','iconfont icon-shousuo')
    }else{
        this.$refs['myicon'+row.id].setAttribute('class'
 
,'iconfont icon-list-collapse')
    }
},

3.隱藏之前的箭頭樣式

<style>
/* my_table 是table的className */
.my_table
    .el-table__body-wrapper
    .el-table__body
    tr
    > td
    .cell
    .el-table__expand-icon {
    display: none !important;
}
</style>

4.效果圖