表格数据根据某一列进行切换

项目介绍

项目环境：Vue3、TypeScript、elementUI Plus

实现效果

一行数据又多个版本，根据版本切换其它列该版本的数据信息；

数据返回格式

实现方式

1. 格式化数据

   const tableList = ref<{ [key: string]: any }[]>([])
   ​
   //监听分页数据列表，加上当前选中的inde、id属性
   watchEffect(() => {
     tableList.value = list.tableData.value.map(item => ({
       ...item,
       currentIndex: 0,
       currentId: item.versions[0].id
     }))
   })
   

2. template代码

    <el-table :data="tableList">
       <el-table-column prop="name" label="name"></el-table-column>
       <el-table-column label="version">
         <template v-slot="{ row }">
           <el-select v-model="row.id" @change="(val) => handleChange(val, row)">
             <el-option
               v-for="item in row.versions"
               :key="item.id"
               :label="item.version"
               :value="item.id"
             ></el-option>
           </el-select>
         </template>
       </el-table-column>
       <el-table-column label="status">
         <template v-slot="{ row }">
           {{ row.versions[row.currenIndex].status }}
         </template>
       </el-table-column>
       <el-table-column label="domain">
         <template v-slot="{ row }">
           {{ row.versions[row.currenIndex].domain }}
         </template>
       </el-table-column>
       <el-table-column label="updateTime">
         <template v-slot="{ row }">
           {{ row.versions[row.currenIndex].updateTime }}
         </template>
       </el-table-column>
     </el-table>
   </template>
   

   注意点： 需要切换的列表数据写成{{ row.versions[row.currenIndex].endpointTotal }}格式

3. handleChange方法

   const handleChange = (val, row) => {
     row.currentId = val
     row.currentIndex = row.versions.findIndex(i => i.id === val)
     ElMessage.success('版本更改成功')
   }
   

大功告成🎉🎉🎉