Vue3+Antd——表格样式的一些修改方式

表头列合并

// 需要合并的colSpan配置为合并总列数，其余被合并的列colSpan配置为0即可
{
  title: 'XXX',
  dataIndex: 'first_name',
  width: 80,
  key: 'first_name',
  fixed: 'left',
  colSpan: 2
},
{
  title: '',
  dataIndex: 'second_name',
  width: 60,
  key: 'second_name',
  fixed: 'left',
  colSpan: 0
}

---

折叠按钮显示位置的自定义

// 在table中配置expandIconAsCell与expandIconColumnIndex即可
// expandIconAsCell="true" 开启折叠按钮
// expandIconColumnIndex="2" 折叠按钮显示的列
<a-table
  :columns="columns"
  :data-source="paginatedData"
  :row-key="record => record.id"
  :loading="loading"
  :scroll="{ x: 1500 }"
  :pagination="false"
  size="small"
  bordered
  style="width: 100%;"
  :expandedRowKeys="expandedRowKeys"
  @expand="handleExpand"
  :expandIconAsCell="true"   
  :expandIconColumnIndex="2" 
>

---

控制折叠的展开与关闭方法

// 首先需要配置expandedRowKeys与expand
<a-table
  :columns="columns"
  :data-source="paginatedData"
  :row-key="record => record.id"
  :loading="loading"
  :scroll="{ x: 1500 }"
  :pagination="false"
  size="small"
  bordered
  style="width: 100%;"
  :expandedRowKeys="expandedRowKeys"
  @expand="handleExpand"
  :expandIconAsCell="true"   
  :expandIconColumnIndex="2" 
>

// 定义expandedRowKeys 
const expandedRowKeys = ref([]);

// 配置展开与收起的方法
const handleExpand = (expanded, record) => {
  if (expanded) {
    // 如果展开，添加 record.id 到 expandedRowKeys
    expandedRowKeys.value.push(record.id);
  } else {
    // 如果收起，从 expandedRowKeys 中移除 record.id
    expandedRowKeys.value = expandedRowKeys.value.filter(key => key !== record.id);
  }
};

---