Vue2&ElementUi中表格自定义展开图标箭头

前提
公司有个业务需求需要点击表格的展开箭头显示自定义内容
查阅UI文档有自带的只是需要调整箭头位置和文本一列展示,目前箭头是自己占了一列的宽度
文档地址

看下官方文档的写法 用了一列来实现展开效果type设置为expand

我们自定义一个展开列把宽度设置为1,然后再下一列加上展开的icon图表

效果目前是这样的，现在需要去除自带的展开图表

编写自定义展开逻辑
目前效果上面的是之前的测试数据 看下面就可以

展开的icon就使用表格自带的就行不用额外写

  <h2>表格自定义展开箭头图表</h2>
    <div class="expand">
      <el-table
        border
        :data="dataList"
        :expand-row-keys="expands"
        row-key="idCard"
      >
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div>{{ scope.row.sourceName }}</div>
            <div>{{ scope.row.streetName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sourceName"
          label="人员类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              <i
                class="el-icon el-icon-caret-right icon_color"
                :class="[
                  {
                    'el-table__expand-icon--expanded':
                      expandsObj[scope.row.idCard],
                  },
                ]"
                @click="setExpand(scope.row)"
              ></i>
              {{ scope.row.sourceName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="streetName"
          label="所属街道"
          show-overflow-tooltip
        />
        <el-table-column
          prop="communityName"
          label="所属社区"
          show-overflow-tooltip
        />
        <el-table-column
          prop="managementMeasuresName"
          label="管理措施"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    data(){
		 expands: [],
      expandsObj: {},
	}
	methods:{
			// 展开
    setExpand (item) {
      const { idCard } = item
      if (!this.expands.includes(idCard)) {
        this.expands.push(idCard)
        this.expandsObj[idCard] = true
      } else {
        const index = this.expands.indexOf(idCard)
        this.expands.splice(index, 1)
        this.expandsObj[idCard] = false
      }
    }
		}

css样式需要把原有的图标透明度设置一下

.expand {
  ::v-deep .el-table__expand-icon {
    opacity: 0;
  }
}

注意Tips：由于原有的展开列type=expand 宽度为1px在浏览器放大后会左边的边框会显示的粗一点 目前我的解决方案也有了 只是一个不同的css样式 大家可以自己想一下具体方式实现 或者留言给我

码云代码地址
github代码地址