首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-plus按钮展开

element-plus 按钮展开/隐藏功能实现

2025-06-27 12:11:09 作者：焚城

本文给大家介绍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>

到此这篇关于element-plus 按钮展开/隐藏功能实现的文章就介绍到这了,更多相关element-plus按钮展开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！