el-checkbox-group勾选框多选和表格联动 表格数据根据多选框的顺序显示，不能根据勾选顺序显示

 <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in props.cities" :key="city.taskId" :label="city.taskId">{{
        city.taskName
        }}</el-checkbox>
      </el-checkbox-group>

 <el-table :data="TableDataPlan" ref="tableRef" style="width: 100%" height="500">  </el-table>

const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === props.cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.cities.length
  TableDataPlan.value = value.map(checkItem => {
    let selectItem = TableDataPlan.value.find((tableItem: any) => tableItem.taskId == checkItem)
    if (!!selectItem) {
      return {
        ...selectItem,
        itemPlanId: props.itemPlanId
      }
    } else {
      let obj = props.cities.find((item: any) => item.taskId == checkItem)
      return {
        ...JSON.parse(JSON.stringify(obj)),
        finishDate: moment().format('YYYY-MM-DD'),
        startDate: moment().format('YYYY-MM-DD'),
        itemPlanId: props.itemPlanId

      }
    }
  })

  // 按显示顺序排序 

  let tables = props.cities.map((item: any) => {
    return {
      ...item,
      finishDate: moment().format('YYYY-MM-DD'),
      itemPlanId: props.itemPlanId

    }
  })
  TableDataPlan.value = tables.filter((checkboxItem: any) => {
    let selectItem = TableDataPlan.value.find((tableItem: any) => tableItem.taskId == checkboxItem.taskId)
    if (selectItem) {

      return {
        finishDate: moment().format('YYYY-MM-DD'),
        ...JSON.parse(JSON.stringify(selectItem)),
        itemPlanId: props.itemPlanId
      }
    } else {
      return undefined
    }
  })
}