使用Ant-design-vue处理嵌套子表格中有关展开额外行的图标问题

 关于我最近被Ant-design-vue的各种属性搞疯了这件事

一. 如果是想保留+号，只是想单纯的换个位置，比如说换到和某某列并一起的话

<a-table
   // 其他属性已省略
   :expandIconColumnIndex="3"
>

使用 expandIconColumnIndex 来修改即可，比如说要插在第 3 列就设成 3 就好了，可能第 3 列还有其他的数据比如说88，就会变成：＋ 88  ，逻辑还是正常的自己调好就行了

此时适用于你想把 + 号放在操作的那一列中

 

二. 如果是想保留+号，想给上面空空的地方加个列标题的话

<a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }" :expand-column-width="100">
  <template #bodyCell="{ column }">
    <template v-if="column.key === 'action'">
      <a>Delete</a>
    </template>
  </template>
  <template #expandedRowRender="{ record }">
    <p style="margin: 0">
      {{ record.description }}
    </p>
  </template>
  
  /// 看这里，加这个！！！
  <template #expandColumnTitle>
    <span style="color: red">More</span>
  </template>
  ///
</a-table>

加代码中提到的那部分即可，还可以自由更改字体的样式

三. 如果是不想保留+号，改为其他的图标类型的话，或者是改为：V 展开/收起的话

没错，就是我遇到的问题，还是如往常一样找了很多文章，发现他们都出奇的一致使用

methods : {
    customExpandIcon(props){
        console.log(props)
        if (props.expanded) {
           return <a style={{ color: 'black',marginRight:8 }} onClick={e => {
               props.onExpand(props.record, e);
        }}><a-button type="link">关闭详情</a-button></a>
        } else {
           return <a style={{ color: 'black' ,marginRight:8 }} onClick={e => {
               props.onExpand(props.record, e);
           }}><a-button type="link">查看详情</a-button></a>
        }
    }
}

我的vue3+ts+vite不支持我这么做，但是偏偏网上全是这种，没有办法，只能换种思路了（可恶）

先附个样式图

首先先把 + 号去掉，就是直接把 expandIconColumnIndex="-1"

<a-table
     :columns="columns"
     :data-source="templateTable"
     :scroll="{ x: 1200, y: undefined, scrollToFirstRowOnChange: true }"
     class="components-table-demo-nested"
     @expand="getInnerData"

     /// 关键点
     :expandIconColumnIndex="-1"
     :expandIconAsCell="false"
     ///

     :pagination="false"
     :expandedRowKeys="expandedRowKeys"
     :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
>

接着直接封装两个按钮，赋予逻辑，因为我们展开/关闭其实都是调用了某一个函数，只要我们点击的时候让他们再去调一次，带着不一样的值即可，又因为是响应式，所以会及时渲染不需要担心 

<template v-if="column.key === 'operation'">
            <a-button
              type="link"
              size="small"
              style="font-size: 14px"
              @click="getInnerData(false, record)"
              v-if="judgeInclude(record)"
            >
              <UpOutlined />
              收起
            </a-button>
            <a-button
              type="link"
              size="small"
              style="font-size: 14px"
              @click="getInnerData(true, record)"
              v-if="!judgeInclude(record)"
              ><DownOutlined />展开</a-button
            >
            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px">编辑</a-button>
            <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
              <a-button type="link" danger size="small" style="font-size: 14px; margin-left: -5px">删除</a-button>
            </a-popconfirm>
          </template>

const innertemplatedata: UnwrapRef<messageTemplate[]> = reactive([])

const expandedRowKeys: number[] = reactive([])

const getInnerData = (expanded, record): void => {
  // 判断是否点开
  console.log('chufal')
  expandedRowKeys.length = 0
  if (expanded === true) {
    const b = record.key.toString()
    expandedRowKeys.push(Number(b.slice(-1)))
    innertemplatedata.length = 0
    innertemplatedata.push(record)
  } else {
    expandedRowKeys.length = 0
    innertemplatedata.length = 0
  }
}

const judgeInclude = (record): boolean => {
  console.log(innertemplatedata.includes(record))
  return innertemplatedata.includes(record)
}

 另附完整表格代码

<!-- 表格部分 -->
      <a-table
        :columns="columns"
        :data-source="templateTable"
        :scroll="{ x: 1200, y: undefined, scrollToFirstRowOnChange: true }"
        class="components-table-demo-nested"
        @expand="getInnerData"
        :expandIconColumnIndex="-1"
        :expandIconAsCell="false"
        :pagination="false"
        :expandedRowKeys="expandedRowKeys"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
      >
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'templateStatus'">
            <span>
              <a-switch
                v-model:checked="record.templateStatus"
                checked-children="启用"
                un-checked-children="禁用"
                @change="changeStatus(record.templateId, record.templateStatus)"
              />
            </span>
          </template>
          <template v-if="column.key === 'operation'">
            <a-button
              type="link"
              size="small"
              style="font-size: 14px"
              @click="getInnerData(false, record)"
              v-if="judgeInclude(record)"
            >
              <UpOutlined />
              收起
            </a-button>
            <a-button
              type="link"
              size="small"
              style="font-size: 14px"
              @click="getInnerData(true, record)"
              v-if="!judgeInclude(record)"
              ><DownOutlined />展开</a-button
            >
            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px">编辑</a-button>
            <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
              <a-button type="link" danger size="small" style="font-size: 14px; margin-left: -5px">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
        <template #expandedRowRender>
          <a-table :columns="innerColumns" :data-source="innertemplatedata" :pagination="false">
            <template #bodyCell></template>
          </a-table>
        </template>
      </a-table>

当然，这个操作这一列我是固定了的，给了固定属性，如果说要固定的话，可以用这个属性

 

四. 如果是说我想另起一列放V 展开/收起呢

只需要在表格遍历的时候多加一列，然后还是一样放上这两个封装而成的函数，调同样的方法，就可以辽我的宝

这里xxx改成你对应的列名就好了
<template v-if="column.key === '（xxx）'">

最后祝大家都能写出没有bug的代码 (✿◕‿◕✿)