ant design of vue之a-table组件自定义展开/收起功能

李宝宝aqd

已于 2023-08-07 14:27:58 修改

阅读量2.5k

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-07 14:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_47027172/article/details/132145042

版权

ant design of vue之a-table组件自定义展开/收起功能

目标实现：

在这里插入图片描述

1.展开按钮固定于表格最右端
2.展开子表格同时关闭其他展开项
3.自定义展开按钮内容（初始化的是加号）

html

 <a-table ref="table" :columns="columns" :data-source="dataSource" class="components-table-demo-nested"
        :expandIconColumnIndex="6"
         :expandIconAsCell="false" 
         :expandIcon="expandIcon"
        :expanded-row-keys.sync="expandedRowKeys">
        <template #operation>
          <!-- <a>Publish</a> -->
        </template>
        <template #expandedRowRender>
          <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
          </a-table>
        </template>
      </a-table>

javascript

<script>
const columns =
  [{
    title: '名称',
    dataIndex: 'name',
    align: 'center',

  },
  {
    title: '平台',
    dataIndex: 'platform',
    align: 'center',

  }, {
    title: '更新数',
    dataIndex: 'upgradeNum',
    align: 'center',

  }, {
    title: '版本',
    dataIndex: 'version',
    align: 'center',

  }, {
    title: '创建者',
    dataIndex: 'creator',
    align: 'center',

  }, {
    title: '创建时间',
    dataIndex: 'createdAt',
    align: 'center',

  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 80,
    align: 'center',
  }]
  //模拟数据
const data = [
  {
    key: 0,
    name: "Screem",
    platform: "iOS",
    arr: [1, 2, 3],
    upgradeNum: 500,
    version: "10.3.4.5654",
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 1,
    name: "Screem",
    platform: "iOS",
    version: "10.3.4.5654",
    upgradeNum: 500,
    arr: [1, 2, 3],
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
  {
    key: 2,
    name: "Screem",
    platform: "iOS",
    version: "10.3.4.5654",
     upgradeNum: 500,
    arr: [],
    creator: "Jack",
    createdAt: "2014-12-24 23:12:00",
  },
];

const innerColumns = [{
    title: '名称',
    dataIndex: 'name',
    align: 'center',

  },
  {
    title: '平台',
    dataIndex: 'platform',
    align: 'center',

  }, {
    title: '更新数',
    dataIndex: 'upgradeNum',
    align: 'center',

  }, {
    title: '版本',
    dataIndex: 'version',
    align: 'center',

  }, {
    title: '创建者',
    dataIndex: 'creator',
    align: 'center',

  }, {
    title: '创建时间',
    dataIndex: 'createdAt',
    align: 'center',

  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: "2014-12-24 23:12:00",
    name: "This is production name",
    upgradeNum: "Upgraded: 56",
  });
}

export default {
  name: 'Area',
  data() {
    return {
      data,
      columns,
      innerColumns,
      innerData,
      expandedRowKeys: [],
      dataSource: [],
      loading: false,
    
    };
  },
  methods: {
    // 渲染打开子表格图标样式
    expandIcon(props) {
      var that = this
      //props.record的内容是表格单行的所有数据，可以在这里判定子表格是否有数据。
      if (props.expanded) {
        //props.expanded的值是true或false，代表子表格是否展开
        //有数据展开时图标样式
        return (
          <a
            onClick={(e) => {
              props.onExpand(props.record, e);
            }}
          >
            收起
          </a>
        );
      } else {
        //有数据且未展开时图标样式
        return (
          <a
            onClick={(e) => {
              props.onExpand(props.record, e);
              //这里用来收起其他已展开的数据
              let key = that.expandedRowKeys.pop()
              that.expandedRowKeys = []
              that.expandedRowKeys.push(key)
            }}
          >
            展开
          </a>
        );
      }
    

};
</script>