element checkbox

最新推荐文章于 2024-03-23 19:27:50 发布

原创最新推荐文章于 2024-03-23 19:27:50 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue

element 专栏收录该内容

5 篇文章

订阅专栏

该示例展示了如何使用Vue.js和Element-UI库创建一个全选和多选功能的组件。代码中定义了一个数据集`cityOptions`，包含了四个城市选项，并初始化了已选城市的`checkedOptions`。`isCheckAll`属性根据全选状态进行更新。当全选按钮被点击时，`handleCheckAllChange`方法会更新所有城市的选择状态。而当单个城市选择变化时，`handleCheckedCitiesChange`方法会同步全选按钮的状态。通过这种方式，实现了双向数据绑定和选择状态的同步。

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script>
<div id="app">
   <el-checkbox v-model="isCheckAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
  </el-checkbox-group>
</div>

const cityOptions =  [{id:1,name:'上海'}
                 ,{id:2,name:'北京'}
                 ,{id:3,name:'广州'}
                 ,{id:4,name: '深圳'}]; 
const checkedOptions=[1,2]
var Main = {
    data() {
      return {
        cities:cityOptions,
        checkedCities: checkedOptions,
        isCheckAll: cityOptions==checkedOptions,
      };
    },
    methods: {
      handleCheckAllChange(val) {
        var allids=new Array()
        for(var i=0;i<cityOptions.length;i++){
          allids[i]=cityOptions[i].id
        }
        this.checkedCities = val ? allids : [];
        console.log(this.checkedCities);//显示选中内容
      },
      handleCheckedCitiesChange(value) {
        this.isCheckAll=value.length==cityOptions.length
        console.log(this.checkedCities);//显示选中内容
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')