数据和页面展示分离操作

<script setup>
// 从Element Plus中导入需要的图标组件  
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'
// 导入Vue的ref和onMounted函数  
import {ref,onMounted} from 'vue';// 使用ref创建一个响应式的userList数组，用于存储用户数据  
const userList = ref([])// 定义一个函数，用于获取用户数据并赋值给userList  
const getUserList = ()=>{const userinfoList = [{id:1,name:'tom',age:20},{id:2,name:'jj',age:21},{id:3,name:'ls',age:22},{id:4,name:'ww',age:23}]userList.value = userinfoList // 将静态数据赋值给userList的value属性  
}
// 在组件挂载后调用getUserList函数，以填充用户数据  
onMounted(()=>getUserList())
</script><template><div><!-- 使用Element Plus的el-table组件展示用户列表 --> <el-table :data="userList" border><!-- 定义表格的列，这里展示了ID、name和age三列 -->  <el-table-column label="ID" prop="id"></el-table-column><!--label="ID"列信息  prop="id"列值信息--><el-table-column label="name" prop="name"></el-table-column><el-table-column label="age" prop="age"></el-table-column><!-- 定义一个操作列，宽度为200px -->  <el-table-column label="操作" width="200"><!-- 在操作列中添加按钮，这里使用了编辑和删除图标的按钮 -->  <!-- 使用了Element Plus的el-button组件，并设置了type、size、icon和circle属性 -->  <!-- <el-button type="primary">编辑</el-button> --><el-button type="primary" size="small" :icon="Edit" circle /><!-- 默认样式primary --><el-button type="danger" size="small" :icon="Delete" circle /></el-table-column>  </el-table>  </div>  
</template>  <style scoped>  
/* 样式区域，当前为空，可以根据需要添加样式 */  
</style></el-table-column></el-table></div>
</template><style scoped></style>

运行结果

如何做修改删除操作

<script setup>
// 从Element Plus中导入需要的图标组件  
import {Check,Delete,// 注意：这里的Delete是图标组件，不是函数或方法  Edit,Message,Search,Star,
} from '@element-plus/icons-vue'
import {ref,onMounted} from 'vue';// 创建一个响应式的userList数组，用于存储用户数据  
const userList = ref([])
// 定义一个函数，用于获取用户数据并赋值给userList  
const getUserList = ()=>{const userinfoList = [{  // ... 用户数据列表  id:1,name:'tom',age:20},{id:2,name:'jj',age:21},{id:3,name:'ls',age:22},{id:4,name:'ww',age:23}]userList.value = userinfoList // 将用户数据赋值给userList的value属性
}
// 组件挂载后调用getUserList函数 
onMounted(()=>getUserList())
//删除函数
const deleteUser = (userId)=>{
// 遍历userList数组  console.log(userId)for(var i=0;i<userList.value.length;i++){//循环获得数组中的每一个对象
// 判断当前遍历到的用户ID是否与传入的userId相等 if(userList.value[i].id == userId){//判断对象的id属性值是否和传入的用户id值相等
// 如果相等，则从数组中删除该用户  userList.value.splice(i,1)//删除集合中的对象，参数1，删除元素的下标数，参数2，删除几行数据
// 打印更新后的userList数组  console.log(userList.value)
// 注意：删除元素后，数组长度会变化，但i会自动递增，因此不需要手动调整i的值}}
}
//更新函数
const EditUser = ()=>{}
// 注意：EditUser函数当前没有接收任何参数，也没有操作userList，因此它目前无法直接用于编辑用户  
// 您可能需要传递当前行的数据（row）到EditUser函数中，并在函数内部实现更新逻辑  
</script><template><div><!-- 使用Element Plus的el-table组件展示用户列表 -->  <el-table :data="userList" border><!-- 定义表格的列 -->  <!-- ... 其他列定义 --> <el-table-column label="ID" prop="id"></el-table-column><!--label="ID"列信息  prop="id"列值信息属性值--><el-table-column label="name" prop="name"></el-table-column><el-table-column label="age" prop="age"></el-table-column><el-table-column label="操作" width="200"><!-- 使用作用域插槽自定义操作列的内容 --> <template #default="{row}"><!-- 获得操作当前行对象 --><!-- <el-button type="primary">编辑</el-button> --><el-button type="primary" size="small" :icon="Edit" circle /><!-- 默认样式primary --><el-button type="danger" size="small" :icon="Delete" circle @click="deleteUser(row.id)"/></template></el-table-column></el-table></div>
</template><style scoped></style>

运行结果