element-ui多选框checkbox动态生成部分禁选

项目开发中，需要使用checkbox动态生成部分禁选，如下图

 

直接上代码：

<template>
  <div>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox v-for="item in dataList" :key="item" :label="item" :disabled="disabledList.includes(item)">
        {{ item }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 数据
      checkedList: [], // 选中的项
      disabledList: [1, 3, 5] // 要禁用的项
    };
  }
};
</script>

在上面的代码中，dataList是你提供的数据，checkedList是选中的项，disabledList是要禁用的项。使用v-for迭代dataList，对于每个项，使用:disabled属性将其是否禁用与disabledList中的项进行匹配。

这样，disabledList中的项将被禁用，而其他项将保持可用状态。