内部copy流程

all-filter.vue

- 单选

//先定义数据源与接收变量
const subjectOptions = ref([
{ id: 1, value: "残联" },
{ id: 2, value: "自费" },
{ id: 3, value: "民生" },
]) 
const selectSubjectVals = ref[null]
//再定义change方法
const handleSubjectChange = (e) => {
  nextTick(() => {
    console.log('科目:', e);
  });
}
//再完善已选条件计算属性
 {
    type: 'subject',
    label: '科目',
    show: props.displayArray.includes('subject'),
    values: subjectOptions.value.filter(opt => opt.id === selectSubjectVals.value)
 },
//在新增watch监听，注意lastUpdated.subject的subject是计算属性里的type
watch(selectSubjectVals, () => lastUpdated.subject = Date.now());
//然后在完善清空所有筛选方法 clearAll
selectSubjectVals.value = null 
//最后在完善移除单个条件方法 removeCondition
 case 'subject':  // 新增科目移除逻辑
     selectSubjectVals.value = null;
 break;
//最最后，完善dom，样式1：category可传 "course" 或者''teacher'' ，样式2：  category可传 "stu" 
<checkbox-filter v-if="displayArray.includes('subject')" :ref="(el) => handleRef(el, 'subject')" category="course" placeholder="请输入科目"
v-model:checkedValues="selectSubjectVals" :options="subjectOptions" label="科目"
@radioChange="handleSubjectChange" type="radio" />

end!!!!

多选

// 是否分班
const orNotFenClassOptions = ref([
  { id: 0, value: "未分班" },
  { id: 1, value: "已分班" },
])
const selectOrNotFenClassVals = ref([])
const handleOrNotFenClassChange = (e) => {
  nextTick(() => {
    console.log('是否分班:', e);
  });
}

  {
      type: 'orNotFenClass',
      label: '是否分班',
      show: props.displayArray.includes('orNotFenClass'),
      values: orNotFenClassOptions.value.filter(opt => selectOrNotFenClassVals.value.includes(opt.id))
    },

watch(selectOrNotFenClassVals, () => lastUpdated.orNotFenClass = Date.now());

// 重置多选类
  [
    selectOrNotFenClassVals].forEach(
      ref => ref.value = []
    );


case 'orNotFenClass':
      selectOrNotFenClassVals.value = [];
      break;

<checkbox-filter v-if="displayArray.includes('orNotFenClass')" :ref="(el) => handleRef(el, 'orNotFenClass')"
              v-model:checkedValues="selectOrNotFenClassVals" :options="orNotFenClassOptions" label="是否分班"
              @change="handleOrNotFenClassChange" type="checkbox" />

要注意根据实际情况调整category