如何改变Antd中展开子表格按钮的位置和样式

注：使用Ant Design Vue 2.2.8版本进行代码演示，原代码是Antd 2.2.8版本中嵌套子表格中的代码。

Antd默认的展开子表格的按钮有时候我们并不想放在第一列，也不想是这样的默认图标，此时就可以做一个改变。

一、改变展开按钮位置

在原本代码的基础上，在中添加

:expandIconColumnIndex="3"

:expandIconAsCell="false"

想把展开按钮放在第几列，就给expandIconColumnIndex设置多少值（第1列为0，以此类推）

expandIconAsCell这个属性也要加，不加按钮换位不起作用

设置完后，展开按钮变为下图位置。

 

二、改变展开按钮样式

1.在原本代码的基础上，在中添加:expandIcon="expandIcon"，注册一个名为expandIcon的方法。

2.把原本代码中的data改成下面的样子。

    由于我们放置展开图标在第4列，所以要把原本第四列的内容删去，即删去data中所有upgradeNum的值，不然的话第4列就会同时展示upgradeNum值和之后设置的图标。

    然后加上代表子表格是否有值的属性，这边用arr为名的数组代替。（为了演示方便，这里的arr不是最终渲染出来的子表格内容，只是用来代表子表格是否有值，之后的子表格数据还是会根据原本代码中innerData的内容渲染。每张子表格展示不同的内容可以看作者其他文章，不在此赘述）

注：arr可以使用true、false，也可以用保存了子表格数据的数组，这边只是为了判定子表格是否有值来给定图标样式。columns表格规则中没有的属性，data中也可以添加，不会影响表格展示。

const data = [
  {
    key: 0,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [1, 2, 3],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 1,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [1, 2, 3],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 2,
    name: "Screem",
    platform: "iOS",
    // upgradeNum: 500,
    arr: [],
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
];

由于删去了data中原本upgradeNum的值，Upgraded列没有数据了，所以此时的表格变成如下样子。

 3.在methods里书写之前注册的expandIcon方法，等是引入的Antd中的图标。图标可以自由定义，纯文字或者特殊字符（只要显示的出）都ok。

好啦，此时不管是有数据未展开、有数据展开、无数据的展开子表格图标都有相应的样式了。

 

---

完整代码贴在下面，看懂上面内容的小伙伴们就不用往下看了，没看懂的可以直接复制粘贴自己感受一下。