elementui获取checkbox的值

可以通过以下方式获取elementui中checkbox的值：

1. 在模板中使用v-model绑定checkbox的值，例如：

<el-checkbox v-model="checked">选项1</el-checkbox>

2. 在Vue实例中定义checked变量，并在methods中定义一个函数来获取checkbox的值，例如：

data() {
  return {
    checked: false
  }
},
methods: {
  getCheckedValue() {
    console.log(this.checked)
  }
}

3. 在需要获取checkbox的值的地方调用getCheckedValue函数即可。

相关问题

elementui checkbox判断选中

### 回答1：
使用ElementUI的Checkbox组件，可以通过v-model绑定一个Boolean类型的变量来判断是否选中。当Checkbox被选中时，绑定的变量值为true，反之为false。可以通过监听Checkbox的change事件来获取选中状态的变化。例如：

<template>
  <div>
    <el-checkbox v-model="isChecked" @change="handleChange">选中</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleChange(val) {
      console.log(val) // 打印选中状态的变化
    }
  }
}
</script>

### 回答2：
ElementUI是一套基于Vue.js的桌面端组件库，它提供了很多实用的组件来开发各种大中型项目，如表单组件、数据展示组件等。其中，checkbox组件是用来表示多个选项的组件，它常用于表单中，用来进行多选操作。在开发实际项目的时候，我们可以通过elementui checkbox判断选中来对所选中的多个选项进行处理。

要判断elementui checkbox选中状态，首先要知道，checkbox有两个属性，即value和checked。其中value是checkbox的值，checked是checkbox是否选中的状态，值为true或false。所以，只需要在Vue组件中使用v-model绑定value值，就可以动态地获取checkbox是否选中状态，然后进行逻辑判断。

举个例子，如下所示：

<template>
  <div>
    <el-checkbox v-model="checkedList" label="选项1"></el-checkbox>
    <el-checkbox v-model="checkedList" label="选项2"></el-checkbox>
    <el-button type="primary" @click="handleCheck">判断选中</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []  //绑定选中状态
    };
  },
  methods: {
    handleCheck() {
      if (this.checkedList.length > 0) {
        console.log('选中了' + this.checkedList.length + '项');
      } else {
        console.log('未选中任何项');
      }
    }
  }
};
</script>

上面的代码中，我们使用了el-checkbox组件，通过v-model绑定了checkedList状态，当选中某个checkbox时，checkedList中就会添加value值。然后在handleCheck方法中，我们可以通过判断checkedList的长度，来判断选中了几个选项，然后进行相应的处理。

除了判断elementui checkbox的选中状态，我们还可以通过watch属性来监听checkbox的变化，例如：

<template>
  <div>
    <el-checkbox v-model="checkedList" label="选项1"></el-checkbox>
    <el-checkbox v-model="checkedList" label="选项2"></el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []  //绑定选中状态
    };
  },
  watch: {
    checkedList: {
      handler(val) {
        console.log('选中了' + val.length + '项');
      },
      immediate: true // 页面刷新后，也会执行handler方法
    }
  }
};
</script>

上述代码中，我们使用watch来监听checkedList变化，当checkedList变化时，触发handler方法，我们可以在该方法中获取到选中的个数，并进行相应的操作。

总之，elementui checkbox是非常实用的组件，在实际开发中，我们可以通过绑定v-model和监听watch属性来获取checkbox的选中状态，然后进行逻辑判断，从而实现我们想要的功能。

### 回答3：
在使用elementui的checkbox组件时，可以通过绑定v-model属性实现判断是否选中的功能。具体方法是在checkbox上绑定一个变量，当选中时该变量的值变为true，反之为false。在代码中可以根据该变量的值做出相应的判断。

例如，假设我们有一个商品列表，每个商品都有一个checkbox，每当有商品被选中时，我们需要计算选中商品的总价。那么我们可以在每个checkbox上绑定一个变量，如checked，并在每次变化时更新该变量的值。代码如下：

<template>
  <div>
    <div v-for="(item, index) in goodsList" :key="index">
      <el-checkbox v-model="item.checked" @change="handleChange">{{ item.name }} - {{ item.price }}元</el-checkbox>
    </div>
    <p>已选商品总价：{{ totalPrice }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {name: '商品1', price: 100, checked: false},
        {name: '商品2', price: 200, checked: false},
        {name: '商品3', price: 300, checked: false},
        {name: '商品4', price: 400, checked: false},
      ],
    }
  },
  computed: {
    totalPrice() {
      let total = 0
      this.goodsList.forEach(item => {
        if (item.checked) {
          total += item.price
        }
      })
      return total
    }
  },
  methods: {
    handleChange() {
      // do something
    }
  }
}
</script>

在这份代码中，我们使用了v-for指令遍历商品列表，并在每个checkbox上绑定了该商品的checked属性作为v-model。在computed中定义了一个totalPrice计算属性，用于计算已选商品的总价。每次checkbox的值变化时，会触发change事件，我们可以在handleChange方法中做出相应的操作。例如，可以输出已选商品的名称或发送选中的商品信息给后端等。

vue elementui 三级checkbox

vue element-ui 提供了多级的 checkbox 组件，可以实现三级的 checkbox 功能。

首先，需要在组件中引入 element-ui 的 checkbox 组件和三级数据。

<template>
  <div>
    <el-checkbox v-model="checkedAll" @change="handleCheckedAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities">
      <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckedCitiesChange(city)" v-for="city in cities" :label="city.value" :key="city.id">
        {{ city.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        {
          id: 1,
          label: '北京',
          value: 'beijing',
          children: [
            {
              id: 11,
              label: '东城区',
              value: 'dongcheng',
            },
            {
              id: 12,
              label: '西城区',
              value: 'xicheng',
            },
          ],
        },
        {
          id: 2,
          label: '上海',
          value: 'shanghai',
          children: [
            {
              id: 21,
              label: '浦东新区',
              value: 'pudong',
            },
            {
              id: 22,
              label: '徐汇区',
              value: 'xuhui',
            },
          ],
        },
      ],
      checkedCities: [], // 选中的城市
      checkedAll: false, // 全选状态
      isIndeterminate: false, //是否为半选状态
    };
  },
  methods: {
    handleCheckedAllChange() {
      this.checkedCities = this.checkedAll ? this.getCitiesValues() : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(city) {
      const checkedCount = this.checkedCities.filter(
        (item) => item.startsWith(city.value),
      ).length;
      if (checkedCount === city.children.length) {
        // 子节点全选中，则取消选中父节点
        this.checkedCities = this.checkedCities.filter(
          (item) => !item.startsWith(city.value),
        );
      } else {
        // 子节点未全部选中，则选中父节点
        this.checkedCities = [
          ...this.checkedCities,
          ...city.children.map((child) => child.value),
        ];
      }

      this.checkedAll = this.checkedCities.length === this.getCitiesValues().length;
      this.isIndeterminate =
        this.checkedCities.length > 0 &&
        this.checkedCities.length !== this.getCitiesValues().length;
    },
    getCitiesValues() {
      return this.cities.reduce((pre, cur) => {
        pre.push(cur.value);
        cur.children.forEach((child) => pre.push(child.value));
        return pre;
      }, []);
    },
  },
};
</script>

上面的示例中，我们使用了 `el-checkbox` 和 `el-checkbox-group` 组件来构建多级的 checkbox，`v-model` 指令绑定了选中的数据，通过 `@change` 事件监听选中状态的变化。

`handleCheckedAllChange` 方法用于全选/取消全选操作，更新选中的城市数组，并设置全选状态和半选状态。

`handleCheckedCitiesChange` 方法用于子节点的选中操作，根据子节点的选中状态更新父节点的选中状态，并更新全选状态和半选状态。

`getCitiesValues` 方法用于获取所有城市和子节点的值，方便判断全选状态和半选状态。

这样我们就可以实现三级 checkbox 的功能了。