expandIconColumnIndex、expandIcon，使用ant design中 expandedRowRender 展开额外行自定义图标位置和样式

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :expandRowByClick="false"
    :expandIconAsCell="false"
    :expandIconColumnIndex="4"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :expandIcon="(props)=>this.customExpandIcon(props)">

    <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
    <p slot="expandedRowRender" slot-scope="record" style="margin: 0">这里是额外展开的行 {{ record.description }}</p>
    

  </a-table>
</template>
<script>
const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
  {
    title: "Action",
    dataIndex: "",
    key: "x",
    scopedSlots: { customRender: "action" }
  }
];

const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

export default {
  data() {
    return {
      selectedRowKeys: [], // Check here to configure the default column
      data,
      columns
    };
  },
methods : {
     onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    customExpandIcon(props){
        console.log(props)
        // if(props.record.children.length > 0){
            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>
            }
        // }else{
        //     return <span style={{marginRight:8 }}></span>
        // }
    }
}
};
</script>