弹框用户勾选过得置灰或者不显示

m0_526119402024-09-11 14:09

弹框用户勾选过得置灰或者不显示

添加 :disabled="row.disabled"

复制代码

        <el-table-column label="名称" width="300">
            <template #default="{ row }">
              <el-radio
              :disabled="row.disabled"
                :label="row.coursesName"
                v-model="selectedRowCourse"
                @change="onCourseChange(row)"
              />
            </template>
          </el-table-column>

一.置灰

每次弹框打开的时候调接口进行数据处理

复制代码

const getData = () => {
  let params = {
    id：'111111
  };
  singleCourseSearch(params).then((res) => {
    // courseData.value = res.data.items;
    courseTotal.value = res.data.total;
	
    let  formattedDate=res.data.items
    const idSet = new Set(courseForm.courses.map(item => item.id));
    let courseData11 = formattedDate.map(item => ({
        ...item,
        disabled: idSet.has(item.idGenerator)
      }));
    courseData.value = courseData11
  });

1.拿到接口的数据

复制代码

 let  formattedDate=res.data.items

2.courseForm.courses【新增数据都会push进去】取出所有id数据

复制代码

const idSet = new Set(courseForm.courses.map(item => item.id));

3.formattedDate循环添加disabled,只有接口某个数据与新增的数据的id相同，就添加disabled属性

复制代码

let courseData11 = formattedDate.map(item => ({
    ...item,
    disabled: idSet.has(item.idGenerator)
  }));
courseData.value = courseData11

二：直接filter删除

1.拿到接口的数据

复制代码

let  formattedDate=res.data.items

2.courseForm.courses【新增数据都会push进去】取出所有id数据

复制代码

const idSet = new Set(courseForm.courses.map(item => item.id));

3.formattedDate接口的数据idGenerator与新增的数据的id进行比较，如果有的话就筛选掉

复制代码

  let courseData11 = formattedDate.filter(item => !idSet.has(item.idGenerator));
  courseData.value = courseData11

弹框用户勾选过得置灰 或者不显示

弹框用户勾选过得置灰或者不显示