Antdv 1.7.8 Table组件如何仅为特定行显示展开图标

直接用组件自带的两个配置项就能实现，不需要hack样式：

• expandIcon：自定义展开图标渲染规则，逐行判断是否渲染图标
• rowExpandable：控制行是否允许展开，从逻辑层面拦截不符合条件的行展开行为

代码修改 #

模板部分 #

给<a-table>新增两个属性绑定，原有配置和插槽完全不用动：

<a-table
  :columns="columns"
  :row-key="record => record.id"
  :data-source="tableData"
  :pagination="{hideOnSinglePage:true}"
  :expand-icon-as-cell="false"
  :expand-icon-column-index="2"
  :expand-row-by-click="false"
  :expandIcon="customExpandIcon"
  :rowExpandable="record => record.items.length > 0"
>
  <!-- 原有expandedRowRender、items插槽内容保持不变 -->
</a-table>

JS部分 #

在实例里加对应的customExpandIcon方法即可：

var Main = {
  data() {
    return {
      columns: [
        { title: 'ID', dataIndex: 'id' },
        { title: 'Name', dataIndex: 'name' },
        { title: 'Nº items', dataIndex: 'items', scopedSlots: { customRender: 'items' } }
      ],
      tableData: [
        { "id": 1, "name": "Alex", "items": [] },
        { "id": 2, "name": "Boris", "items": [{ "id": 1, "name": "Don Quixote" }, { "id": 2, "name": "Moby Dick" }] },
        { "id": 3, "name": "Carlos", "items": [] }
      ]
    }
  },
  methods: {
    customExpandIcon({ expanded, record, onExpand }) {
      // 无展开内容直接返回空节点，不显示图标
      if (record.items.length === 0) return null
      // 有内容渲染和原生一致的展开箭头
      return <a-icon
        type={expanded ? 'caret-down' : 'caret-right'}
        class="ant-table-row-expand-icon"
        onClick={e => onExpand(record, e)}
      />
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

最终效果 #

• items为空的行不显示展开箭头，也无法被展开
• 有子项的行保留原生展开交互和样式，展开位置和你之前配置的一致
• 不需要额外写CSS隐藏图标，逻辑层直接控制，不会出现样式闪烁问题

内容的提问来源于stack exchange，提问作者guyaloni