vue3+Elament Plus开发：Element Plus多选框 TypeScript 下报错修复

最新推荐文章于 2025-04-20 23:38:00 发布

安心写bug

最新推荐文章于 2025-04-20 23:38:00 发布

阅读量1.8k

点赞数 2

分类专栏：前端 vue3 文章标签： vue3 element-plus typescript 前端

本文链接：https://blog.youkuaiyun.com/qq_36963372/article/details/111031659

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

1 篇文章

订阅专栏

本文解决ElementPlus多选框在TypeScript环境下运行出现的问题，通过使用Vue3特性进行代码重构，确保组件正常工作并保持类型安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+Elament Plus开发：Element Plus多选框 TypeScript 下报错修复

问题描述

Element Plus 的多选框，根据官方文档的示例，在 ts 模式下是无法运行的；
既然用了VUE3，那我们就用VUE3的写法改写下。

官方代码示例

在这里插入图片描述

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

改写后的代码示例

默认全选：

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from 'vue'
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
setup () {
    const data = reactive({
      checkAll: true,
      checkedCities: cityOptions,
      cities: cityOptions,
      isIndeterminate: false,
      handleCheckAllChange: (val: boolean) => {
        data.checkedCities = val ? cityOptions : []
        data.isIndeterminate = false
      },
      handleCheckedTagsChange (value: string) {
        const checkedCount = value.length
        data.checkAll = checkedCount === data.cities.length
        data.isIndeterminate = checkedCount > 0 && checkedCount < data.cities.length
      }
    })
    const refData = toRefs(data)
    return {
      ...refData
    }
}

};
</script>