vue3使用element-plus中table expand展开行控制显示隐藏，去除箭头，自定义方法点击打开展开行

做项目需要使用el-table展开行，但是需要点击元素展开，element-plus中的箭头不需要想要去除。首先我们需要再el-table中写一个额外的el-table-column 

1、主体核心代码：el-table-column 中写插槽

 template #default="props"中的内容就是展开行显示的内容， width="1" type="expand"  是必须填写 el-table的ref也是必须的

<el-table ref="table" max-height="80vh" :data="tableData" style="width: 100%;margin-left: 1px;"
        :header-cell-style="{ background: '#E3E4E5', color: '#606266' }">
        <el-table-column fixed="left" width="1" type="expand">
          <template #default="props">
              <!-- 你的内容 -->
          </template>
        </el-table-column>
    <!-- 其他 el-table-column-->
</el-table>

 2、将自带的箭头取消掉 

css部分

.el-table__expand-icon {
  display: none;
}

3、点击某个元素显示展开行

<el-table ref="table" max-height="80vh" :data="tableData" style="width: 100%;margin-left: 1px;"
        :header-cell-style="{ background: '#E3E4E5', color: '#606266' }">
        <el-table-column fixed="left" width="1" type="expand">
          <template #default="props">
              <!-- 你的内容 -->
          </template>
        </el-table-column>

 <el-table-column fixed="left" width="140" prop="1">
          <template #header>
            <div class="top-box">
              <div>头部</div>
            </div>
          </template>
          <template #default="scope">
              <div class="icon-box icon-box-shou" @click="show(scope.row)">
                   点我
              </div>
          </template>
        </el-table-column>

    <!-- 其他 el-table-column-->
</el-table>

4、逻辑代码部分

自定义了一个show方法，使用toggleRowExpansion方法把当前点击的内容传进去，就能展开对应行

const table: any = ref(null)
const show = (row: any) => {
  // console.log(row);

  if (table.value) {
    table.value.toggleRowExpansion(row)
  }
}