element树形表格修改树形箭头使用cion

要修改element树形表格中的树形箭头图标，可以使用一个带有自定义图标的icon组件来替代默认的箭头图标。

首先，在Vue项目中，需要安装element-ui并引入相关组件：

npm install element-ui --save

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后，在模板中，可以使用scoped slot来自定义树形表格中的节点内容。具体来说，我们需要使用tree-icon组件来渲染左侧的箭头图标，并指定icon属性来显示不同状态下的图标。

例如，可以定义一个名为tree-icon的组件，并在其中使用iconfont来实现自定义图标：

<template>
  <i :class="'iconfont ' + icon"></i>
</template>

<script>
export default {
  props: {
    icon: String
  }
}
</script>

<style>
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-tree-open:before {
    content: "\\e601";
  }
  .icon-tree-close:before {
    content: "\\e625";
  }
</style>

在样式中，我们定义了两个图标，分别对应树形节点展开和折叠两种状态。这里使用的是阿里巴巴的iconfont图标库，可以根据自己的需求选择其他图标库。

接下来，在树形表格中使用tree-icon组件来替代默认的箭头图标。需要注意的是，要将scoped slot的name属性设置为default，并使用tree-icon组件来渲染箭头图标：

<el-table-tree-column
  prop="name"
  label="名称"
  width="180"
  :indent-size="20"
>
  <template slot-scope="{ row }" slot="default">
    <tree-icon :icon="{ 'icon-tree-open': row.expanded, 'icon-tree-close': !row.expanded }"></tree-icon>
    <span>{{ row.name }}</span>
  </template>
</el-table-tree-column>

在这里，我们将tree-icon组件作为scoped slot的子组件，并根据节点的展开状态来动态显示不同的图标。

最后，需要在父组件中引入tree-icon组件，并将其注册为全局组件：

import TreeIcon from './components/TreeIcon.vue'
Vue.component('tree-icon', TreeIcon)

这样，就可以在element树形表格中使用自定义的图标来表示节点的展开状态了。