Element 表格相关操作

数据和页面展示分离操作

复制代码

<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>

运行结果