element-plus 按钮 展开/隐藏

1、小记

element-plus中el-table 的 expand,箭头控制子项显示，有点丑。
想实现类似bootstrap ，用按钮 展开/隐藏子项的功能

2、页面

<!-- 表内容 -->
    <el-table
      :data="tableData"
      :border="true"
      :preserve-expanded-content="true"
      style="width: 100%"
      :expand-row-keys="expands"
      :row-key="getRowKeys"
    >
      <!-- 子项 -->
      <el-table-column type="expand" width="0"><!-- width隐藏列 -->
        <template #default="props">
          <div m="4" class="expandcontent">
            <el-table :data="props.row.family" :border="true" :color="'red'">
              <el-table-column label="Name" prop="name" />
              <el-table-column label="State" prop="state" />
              <el-table-column label="City" prop="city" />
              <el-table-column label="Address" prop="address" />
              <el-table-column label="Zip" prop="zip" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <!-- 其他数据列 -->
      <el-table-column label="Date" prop="date" />
      <el-table-column label="Name" prop="name" />

      <!-- 操作 -->
      <el-table-column label="Operations">
        <template #default="props">
          <el-button type="primary" @click="toggleExpand(props.row)">
            {{ isExpanded(props.row) ? '收起' : '展开' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

3、typescript事件

<script setup lang="tsx">
const getRowKeys = (row) => {
  return row.id
}
//展开自定义
const expands = ref<string[]>([])
const toggleExpand = (row) => {
  const key = getRowKeys(row)
  const index = expands.value.indexOf(key)
  if (index > -1) {
    expands.value.splice(index, 1) // 收起
  } else {
    expands.value.push(key) // 展开
  }
}
const isExpanded = (row) => {
  return expands.value.includes(getRowKeys(row))
}
</script>

4、测试数据

const tableData = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    expand: false,
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st',
        zip: 'CA 94114'
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st ',
        zip: 'CA 94114'
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st ',
        zip: 'CA 94114'
      }
    ]
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    expand: false,
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      }
    ]
  }
]

5、样式

<!-- 样式 -->
<style scoped lang="scss">
// 子项背景色
:deep(.el-table__expanded-cell) {
  background-color: #cbdde2 !important;
}
// 子项居中
.expandcontent {
  width: 95%;
  margin: 0 auto;
}
</style>