Vue3搞定全套Tab标签页与Checkbox复选框：新手也能快速上手

Vue3中巧用Tab标签页和Checkbox复选框：打造交互式且高效的UI

简介

在构建用户界面时，Tab标签页和Checkbox复选框是两个重要的元素，它们可以帮助我们更直观地展示数据，让用户更轻松地进行选择。本文将带你深入了解Vue3中Tab标签页和Checkbox复选框的巧妙用法，帮助你打造交互式且高效的UI。

引入Element组件库

要使用Vue3中的Tab标签页和Checkbox复选框，我们需要先引入element组件库。在package.json文件中添加如下依赖：

{
  "dependencies": {
    "element-ui": "^2.15.6"
  }
}

然后，在main.js文件中引入element组件库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

处理接口数据

假设我们有一个接口返回了以下数据：

{
  "data": [
    {
      "id": 1,
      "name": "张三",
      "age": 20,
      "gender": "男"
    },
    {
      "id": 2,
      "name": "李四",
      "age": 25,
      "gender": "女"
    },
    {
      "id": 3,
      "name": "王五",
      "age": 30,
      "gender": "男"
    }
  ]
}

我们可以将这些数据存储在Vuex的state中，以便在组件中使用。

Tab标签页切换

我们可以使用v-for指令遍历数据，并使用Tab标签页和Checkbox复选框展示数据。当切换Tab标签页时，我们可以使用@click事件监听并触发回调函数，从而显示相应的数据。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab-1">
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name"></el-checkbox>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab-2">
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name"></el-checkbox>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab-1',
      data: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 获取数据并存储在data中
    },
    tabChange(tabName) {
      // Tab标签页切换时触发的回调函数
    }
  }
}
</script>

全选

为了方便操作，我们可以使用一个全选按钮来控制所有复选框的选中状态。当全选按钮被选中时，所有复选框都会被选中；当全选按钮被取消选中时，所有复选框都会被取消选中。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab-1">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name"></el-checkbox>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab-2">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name"></el-checkbox>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab-1',
      data: [],
      allChecked: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 获取数据并存储在data中
    },
    tabChange(tabName) {
      // Tab标签页切换时触发的回调函数
    },
    handleAllCheckedChange(checked) {
      // 全选按钮选中状态发生变化时触发的回调函数
      this.data.forEach(item => {
        item.checked = checked
      })
    }
  }
}
</script>

其他复选框选中状态的回调

我们可以使用@change事件监听其他复选框的选中状态变化。当其他复选框的选中状态发生变化时，我们可以触发一个回调函数，并在回调函数中处理相关逻辑。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab-1">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name" @change="handleItemCheckedChange"></el-checkbox>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab-2">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name" @change="handleItemCheckedChange"></el-checkbox>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab-1',
      data: [],
      allChecked: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 获取数据并存储在data中
    },
    tabChange(tabName) {
      // Tab标签页切换时触发的回调函数
    },
    handleAllCheckedChange(checked) {
      // 全选按钮选中状态发生变化时触发的回调函数
      this.data.forEach(item => {
        item.checked = checked
      })
    },
    handleItemCheckedChange(checked) {
      // 其他复选框选中状态发生变化时触发的回调函数
      // 在这里可以处理相关逻辑
    }
  }
}
</script>

Tab标签页下的复选框与全选框

在Tab标签页下的复选框与全选框需要特殊处理。当切换Tab标签页时，全选框的选中状态需要根据当前Tab标签页下的复选框的选中状态来决定。我们可以通过在Tab标签页切换时触发一个回调函数，并在回调函数中更新全选框的选中状态。

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="Tab 1" name="tab-1">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name" @change="handleItemCheckedChange"></el-checkbox>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab-2">
      <el-checkbox v-model="allChecked">全选</el-checkbox>
      <el-checkbox v-for="item in data" :key="item.id" :label="item.name" @change="handleItemCheckedChange"></el-checkbox>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab-1',
      data: [],
      allChecked: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 获取数据并存储在data中
    },
    handleTabClick() {
      // Tab标签页切换时触发的回调函数
      this.allChecked = this.data.every(item => item.checked)
    },
    handleAllCheckedChange(checked) {
      // 全选按钮选中状态发生变化时触发的回调函数
      this.