Element Plus基础组件及实际功能用法|编辑&删除

Tttian622

已于 2024-09-18 09:01:41 修改

阅读量1k

点赞数 27

文章标签： vue.js javascript elementui

于 2024-09-17 20:45:37 首次发布

本文链接：https://blog.csdn.net/Tttian622/article/details/142314136

版权

1. Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础的表格展示用法: 当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。

可以使用 width 属性来定义列宽。

<script setup>
import { ref } from 'vue'
const userList = ref ([])
  const userinfoList=[{
    id:1,
      name:'Rookie',
      age:27
    },{
      id:2,
      name:'shy',
      age:25
    },{
      id:3,
      name:'ning',
      age:26
    },{
      id:4,
      name:'jklove',
      age:24
    },{
      id:5,
      name:'lan',
      age:25
    }]
    userList.value = userinfoList
</script>

<template>
  <div>
    <el-table :data="userList" border>
      <el-table-column label="ID" prop="id"></el-table-column>
      <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="400">
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
</style>

代码显示结果：

2. Button 按钮

使用 type、plain、round 和 circle 来定义按钮的样式。

<script setup>

import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

..........

</script>

<template>
  <div>
     ...
<!---省略--->
     ...
   <template #default = "{row}"> <!--获得操作当前行对象-->
     <el-button type="primary" :icon="Edit" circle />
     <el-button type="danger" :icon="Delete" @click="deleteUser(row.id)" />
   </template>
     ...
<!---省略--->
     ...
  </div>
</template>

在<script>中：

从 @element-plus/icons-vue 包中导入了 Delete 和 Edit 两个图标组件。

这些图标通常用于 Element Plus UI 组件库的按钮或其他元素中，以提供视觉反馈。

template #default = "{row}"：

#default：这是插槽的名称。在 Vue 3 中，default 是一个特殊的插槽名称，它表示默认插槽。当没有指定插槽名称时，可以使用 #default 来引用它。

="{row}"：这是插槽的参数声明。花括号 {} 内声明了一个名为 row 的变量，它将被用作插槽的参数。这个参数通常是一个对象，包含了父组件传递给插槽的数据。

在这个具体的例子中，row 参数代表当前行的数据对象。因为这是在 el-table-column 组件内定义的，所以 row 会是 el-table 组件 :data 属性绑定的数组中的一个元素。对于每一行数据，row 都会更新为数组中对应的那个元素。

代码显示结果：

以上效果完整代码：

<script setup>

import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

import { ref } from 'vue'
const userList = ref ([])
  const userinfoList=[{
    id:1,
      name:'Rookie',
      age:27
    },{
      id:2,
      name:'shy',
      age:25
    },{
      id:3,
      name:'ning',
      age:26
    },{
      id:4,
      name:'jklove',
      age:24
    },{
      id:5,
      name:'lan',
      age:25
    }]
    userList.value = userinfoList
</script>

<template>
  <div>
    <el-table :data="userList" border>
      <el-table-column label="ID" prop="id"></el-table-column>
      <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="400">
        <template #default = "{row}"> <!--获得操作当前行对象-->
          <el-button type="primary" :icon="Edit" circle />
          <el-button type="danger" :icon="Delete" @click="deleteUser(row.id)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
</style>

3.删除指定条目信息

<script setup>

import { ref ,onMounted } from 'vue'
const userList = ref ([])
const getUserList =()=>{ // 获得用户信息
  const userinfoList=[{
        ...........
   <!---表格信息省略--->
        ...........
]
    userList.value = userinfoList
}
onMounted(()=>getUserList()) //调用用户信息并展示
//删除函数
const deleteUser = (userId)=>{
  console.log(userId)
  for(var i=0;i<userList.value.length;i++){  //循环获得数组中的每一个对象
    if(userList.value[i].id == userId){  //判断对象的id属性值 是否 与传入的id值 相等
      userList.value.splice(i,1) //删除集合中对象，参数1，删除元素的下标数，参数2，删除数据行数
      console.log(userList.value)
    }
  }
}  
}

</script>

<template>

        ...........
   <!---表格格式参数省略--->
        ...........

</template>

<style scoped>

</style>

1. 导入 Vue 功能：

从 vue 包中导入了 ref 和 onMounted 两个函数。

ref 用于创建响应式数据，onMounted 是一个生命周期钩子，用于在组件挂载后执行代码。

2. 定义响应式数据：

使用 ref 创建了一个名为 userList 的响应式数据，初始值为空数组 []。

3. 定义获取用户信息的函数：

定义了一个名为 getUserList 的函数，用于获取用户信息。

函数内部定义了一个 userinfoList 数组，包含了用户数据。这个数组包含了用户的具体信息。

将 userinfoList 数组赋值给 userList.value，使得 userList 变为包含用户信息的响应式数组。

4. 挂载生命周期钩子：

使用 onMounted 钩子调用 getUserList 函数，确保在组件挂载到 DOM 后立即获取用户信息。

5. 定义删除用户的函数：

定义了一个名为 deleteUser 的函数，接收一个参数 userId。

函数内部使用 console.log 打印传入的 userId。

使用 for 循环遍历 userList.value 数组，找到与 userId 相匹配的用户对象。

使用 splice 方法从数组中删除找到的用户对象，并打印更新后的数组。

以上效果完整代码：

<script setup>

import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

import { ref ,onMounted } from 'vue'
const userList = ref ([])
const getUserList =()=>{ // 获得用户信息
  const userinfoList=[{
    id:1,
      name:'Rookie',
      age:20
    },{
      id:2,
      name:'shy',
      age:19
    },{
      id:3,
      name:'ning',
      age:21
    },{
      id:4,
      name:'jklove',
      age:17
    },{
      id:5,
      name:'lan',
      age:18
    }]
    userList.value = userinfoList
}
onMounted(()=>getUserList()) //调用用户信息并展示
//删除函数
const deleteUser = (userId)=>{
  console.log(userId)
  for(var i=0;i<userList.value.length;i++){  //循环获得数组中的每一个对象
    if(userList.value[i].id == userId){  //判断对象的id属性值 是否 与传入的id值 相等
      userList.value.splice(i,1) //删除集合中对象，参数1，删除元素的下标数，参数2，删除数据行数
      console.log(userList.value)
    }
  }

}

</script>

<template>
  <div>
    <el-table :data="userList" border>
      <el-table-column label="ID" prop="id"></el-table-column>
      <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="400">
        <template #default = "{row}"> <!--获得操作当前行对象-->
          <el-button type="primary" :icon="Edit" circle />
          <el-button type="danger" :icon="Delete" @click="deleteUser(row.id)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>

代码显示结果：

1.点击删除按键后，id为1和2的两行代码已删除不见

2.控制台中显示按键功能完好

4.编辑修改指定条目信息

啊我暂时还不会，学成回来补上

5.配置问题

1.问题描述：

报错为：

runtime-core.esm-bundler.js:51 [Vue warn]: Failed to resolve component: el-table-column If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <App>

翻译：无法解析组件：el-table 如果这是本机自定义元素，请确保通过compilerOptions.isCustomElement 将其从组件解析中排除。

总之就是Vue 无法解析 el-table-column 组件。

2.解决方案：

确保根组件的挂载是在使用 ElementPlus 之后，修改main.js中代码为：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

/* 引入 ElementPlus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

app.use(ElementPlus)  // 此时 ElementPlus 的使用在根组件的挂载之前，是正确的；
app.mount('#app')

3.问题参考来源：

Vue3解决：[Vue warn]: Failed to resolve component: el-table(或el-button) 的三种解决方案_if this is a native custom element, make sure to e-CSDN博客