vue 多个switch 开启一个关闭其他

html部分：

      <ul class="switch-box">
        // state.list定义的静态数据
        <li v-for="item in state.list" :key="item.id">
          <el-switch v-model="item.checked" style="--el-switch-on-color: #13ce66;" size="default"
            @change="handleList(item)" />
          <span>{{ item.lable }}</span>
        </li>
      </ul>

js部分：

const state = reactive({
  outShowType: '',  // 需要传给后端的字段 1,2,3,4
  list: [],
  curItem: ''    // 选择的数据
})


  state.list = [
    { id: 1, lable: '自行选择（坐席需要在“号码设置”模块，自行开启一个外显手机号）', checked: false },
    { id: 2, lable: '顺序外显（坐席进行外呼时，系统将根据“号码设置”列表的号码顺序依次使用）', checked: false },
    { id: 3, lable: '随机外显（坐席进行外呼时，系统将根据“号码设置”列表进行随机使用）', checked: false },
    { id: 4, lable: '优先匹配被叫归属地（SIP线路用户专属）', checked: false },
  ]
// switch change事件
// value是list的一条数据
function handleList(value) {
    // 选择之后checked为true
  if (value.checked) {
    // 赋值给选中的数据
    state.curItem = value
    // 其他switch关闭
    state.list.map(item => {
      if (value.id !== item.id) item.checked = false
      return item
    })
  } else {
    state.curItem = ''
  }
  // 传给后台的数据
  state.outShowType = (state.curItem as any).id
}

在进入页面通过接口获取数据，开启上次选中的switch

    // outShowType是后台给的上次选中的id

    state.list.forEach(item => {
      if (item.id === outShowType) {
        item.checked = true
      }
    })

over~