el-table表格中多个选择框的级联效果

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData1.data"
    style="width: 100%"
    border
    size="small"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="value" label="省" width="300" >
      <template #default="scope">
        <el-select
          v-model="scope.row.value1"
          placeholder="Select"
          style="width: 240px"
          @change="changeOneFn(scope.row)"
        >
          <el-option
            v-for="item in tableData2.data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column property="value" label="市" width="300" >
      <template #default="scope">
        <el-select
          v-model="scope.row.value2"
          placeholder="Select"
          style="width: 240px"
          @click="clickFn(scope.row)"
        >
          <el-option
            v-for="item in scope.row.cityList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
const multipleTableRef = ref();
const multipleSelection = ref([]);

let tableData1 = reactive({data:[
  {
    name: 'Tom1',
    value1:'',
    value2:'',
    cityList:[]
  },
  {
    name: 'Tom2',
    value1:'',
    value2:''
  },
  {
    name: 'Tom3',
    value1:'',
    value2:''
  },
  {
    name: 'Tom4',
    value1:'',
    value2:''
  }
]});

let tableData2 =reactive( {data:[
  {
    id: '1',
    value: '陕西',
    label: '陕西',
    name: '陕西',
    city:['西安','咸阳','渭南']
  },
  {
    id: '2',
    value: '四川',
    label: '四川',
    name: '四川',
    city:['重庆','成都']

  }
]});

const changeOneFn=(row)=>{
  console.log('row',row);
  let data=tableData2.data.filter(item=>{
    return item.value==row.value1
  });
  row.cityList=data[0].city.map(item=>{
    return {label:item,value:item}
  })

};
const focusFn= (row)=>{
  if(!row.value1) {
    alert('请先选择省')
  }
}
const clickFn=(row)=>{
  console.log('点击下拉框');
  if(!row.value1){
    alert('请先选择省')
  }
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>