快捷導(dǎo)航

element-plus 按鈕展開/隱藏功能實現(xiàn)

更新時間：2025年06月27日 12:11:08 作者：焚城

本文給大家介紹element-plus 按鈕展開/隱藏功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1、小記

element-plus中el-table 的 expand,箭頭控制子項顯示，有點丑。
想實現(xiàn)類似bootstrap ，用按鈕展開/隱藏子項的功能

2、頁面

<!-- 表內(nèi)容 -->
    <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>
      <!-- 其他數(shù)據(jù)列 -->
      <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、測試數(shù)據(jù)

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>

到此這篇關(guān)于element-plus 按鈕展開/隱藏功能實現(xiàn)的文章就介紹到這了,更多相關(guān)element-plus按鈕展開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: