<Table
	loading={loading}
	dataSource={resourceList}
	rowSelection={rowSelection}
	columns={this.state.ShowColumns}
	bordered
	rowKey={(record) => record.id}
	scroll={{ x: true }}
	expandIcon = {this.expandIcon}
/>
 
// 图标展开样式修改
	expandIcon = (props) => {
	    if (props.record.children && props.record.children.length > 0) {
	      if (props.expanded) {
	        return <a style={{ marginRight: 5 ,color: '#000'}} onClick={e => {
	          props.onExpand(props.record, e);
	        }}>
	          <span style={{ fontSize: '10px', marginRight: '10px', color: '#000'}}>
	            {/* <MyIcon type="icon-weimingming" /> */}
	            <CaretDownOutlined />
	          </span>
			  <span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
			  <span>{props.record.name}</span>
	        </ a>
	      } else {
	        return <a style={{ marginRight: 5 ,color: '#000'}} onClick={e => {
	          props.onExpand(props.record, e);
	        }}>
	          <span style={{ fontSize: '10px', marginRight: '10px' }}>
	            {/* <MyIcon type="icon-zanting3" /> */}
	            <CaretRightOutlined />
	          </span>
	          	<span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
				<span>{props.record.name}</span>
	        </ a>
	      }
	    } else {
	      return (
				<Fragment>
					<span style={{ marginRight: '20px' }}></span>
					<span style = {{margin:'0px 4px'}}><MyIcon type = {props.record.icon}/></span>
					<span >{props.record.name}</span>
				</Fragment>
			)
	    }
  	}

1 a-table自定义展开图标
 
    
 
 
需求是展开图标换成这个样子
 
可以利用a-table的  expandIcon 属性
 
具体使用如下
 
 <a-table
        v-if="isRouterAlive"
        style="margin-top:20px"
        :columns="columns"
        :data-source="matterList"
        :expandIcon="customExpandIcon"
        :expandedRowKeys="expandedRowKeys"
        :defaultExpandedRowKeys="defaultExpandedRowKeys"
        @expand="fatherExpand"
        :indentSize="16"  
  />

<script>
import IconCaretRight from '@ant-design/icons/svg/outline/caret-right.svg?inline'
import IconCaretDown from '@ant-design/icons/svg/outline/caret-down.svg?inline'
export default {
  data () {
    return {
      expandedRowKeys: [],
      defaultExpandedRowKeys: [],
      // 这是table数据
      matterList: [],
      columns: []
    }
  },
  methods: {
     // 树节点展开方法 点击展开图标时的方法
    // 利用es7的async await 可以等数据请求回来之后 进行后续流程，否则就会出现点击两次数据才显示
    async fatherExpand (expanded, record) {
      if (expanded) {
        await this.getChild(record)
        this.expandedRowKeys.push(record.iid)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
      }
    },
 // 栏目树获取子节点数据
    // 把获取来的数据放到 record的children里点击展开图标就会有数据显示了
    getChild (record) {
      return new Promise(resolve => {
        evnetSort({ pid: record.iid }).then(res => {
          // table默认带树表格,如果使用children作参数名则会出现两个表格
          if (res.success) {
            res.data.matterEntities.map(item => {
              item.children = []
            })
            record.children = res.data.matterEntities
            if (record.children === null || record.children.length === 0) {
              record.hasChild = false
              this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
            }
            resolve()
          }
        })
      })
    },
customExpandIcon (props) {
      // 是否有子项，无子项不展示图标
      // record是每行的数据，后端返回的数据会有一个hasChild字段判断是否有子项
      if (props.record && props.record.hasChild) {
        // props.expanded a-table组件判断是否展开了为true是展开,false为没展开
        if (props.expanded) {
          // onClick事件必须添加上，相当于把a-table里的展开事件给了自定义的图标，不加的话点击会失效
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
            {IconCaretDown} onClick={e => { props.onExpand(props.record, e) }} />
        } else {
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component=
            {IconCaretRight} onClick={(e) => { props.onExpand(props.record, e) }} />
        }
      } else {
        return <span style="padding-left: 21px;" />
      }
    },
  }

}
</script>
 

找到需要替换的节点
 

 现在需要将箭头替换为其他icon（element的icon都可以），在F12下找到相应节点：
 

 可以看到content中的就是箭头icon，现在只需要在css中直接覆盖这个就行了。
 
替换css
 
 // 将el-table的展开图标替换为其他图标
  .el-table__expand-icon{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-table__expand-icon 
  .el-icon-arrow-right:before{
    content: "\e6d9";
    border: 1px solid #ccc;
    padding: 2px;
  }

  .el-table__expand-icon--expanded
  .el-icon-arrow-right:before{
    content: "\e6d8";
  }
 
此处是将箭头替换为el-icon中的加减图标，当然加了一点边框修饰，这点不重要。
 替换效果如下：
 
 其中最上面的css是为了设置展开或者收起时，不发生旋转。

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.效果图