Element-UI 表格组件详解（如何使用以及自定义插槽）

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

添加 :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