Vue3-element-plus表格

news/2024/11/13 10:40:31/

一、element-plus

1.用组件属性实现跳转路由

javascript"><el-menu 
active-text-color="#ffd04b" 
background-color="#232323" 
:default-active="$route.path" //高亮
text-color="#fff"router><el-menu-item index="/article/channel"><el-icon><Management /></el-icon><span>文章分类</span></el-menu-item>

2. el-card 组件

javascript"><template><el-card class="page-container"><template #header><div class="header"><span>文章分类</span><div class="extra"><el-button type="primary">添加分类</el-button></div></div></template>...</el-card>
</template><style lang="scss" scoped>
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;}
}
</style>

考虑到多个页面复用,封装成组件

  • props 定制标题

  • 默认插槽 default 定制内容主体

  • 具名插槽 extra 定制头部右侧额外的按钮

  • <slot>

javascript"><script setup>
defineProps({title: {required: true,type: String}
})
</script><template><el-card class="page-container"><template #header><div class="header"><span>{{ title }}</span><div class="extra"><slot name="extra"></slot></div></div></template><slot></slot></el-card>
</template>

页面内使用

javascript"><template><page-container title="文章分类"><template #extra><el-button type="primary"> 添加分类 </el-button></template>主体部分</page-container>
</template>

3.el-表格(重要)

第一步先调通借口返回数据

第二步封装组件

详情看官网

javascript"><el-table :data="channelList" style="width: 100%"><el-table-column label="序号" width="100" type="index"> </el-table-column><el-table-column label="分类名称" prop="cate_name"></el-table-column><el-table-column label="分类别名" prop="cate_alias"></el-table-column><el-table-column label="操作" width="100"><template #default="{ row }"><el-button:icon="Edit"circleplaintype="primary"@click="onEditChannel(row)"></el-button><el-button:icon="Delete"circleplaintype="danger"@click="onDelChannel(row)"></el-button></template></el-table-column><template #empty><el-empty description="没有数据" /></template>
</el-table>const onEditChannel = (row) => {console.log(row)
}
const onDelChannel = (row) => {console.log(row)
}

4.封装弹层

javascript"><script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)const open = async (row) => {dialogVisible.value = trueconsole.log(row)
}defineExpose({open
})
</script><template><el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>我是内容部分</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template></el-dialog>
</template>

二、封装公共组件,下拉菜单

1.新建 article/components/ChannelSelect.vue

javascript"><template><el-select><el-option label="新闻" value="新闻"></el-option><el-option label="体育" value="体育"></el-option></el-select>
</template>

2.页面中导入渲染

javascript">import ChannelSelect from './components/ChannelSelect.vue'<el-form-item label="文章分类:"><channel-select></channel-select>
</el-form-item>

3.调用接口,动态渲染下拉分类,设计成 v-model 的使用方式

javascript"><script setup>
import { artGetChannelsService } from '@/api/article'
import { ref } from 'vue'defineProps({//子组件接收modelValue: {type: [Number, String]}
})const emit = defineEmits(['update:modelValue'])//提交父组件方法
const channelList = ref([])//定义数组动态渲染
const getChannelList = async () => {const res = await artGetChannelsService()channelList.value = res.data.data
}
getChannelList()
</script>
<template><el-select//拆解方法:modelValue="modelValue"@update:modelValue="emit('update:modelValue', $event)"><el-option//动态渲染v-for="channel in channelList":key="channel.id":label="channel.cate_name":value="channel.id"></el-option></el-select>
</template>

注意:这里一定要使用大驼峰命名,不然会报错

4.父组件定义参数绑定

javascript">const params = ref({//父组件定义数据pagenum: 1,pagesize: 5,cate_id: '',state: ''
})<channel-select v-model="params.cate_id"></channel-select>//拆分开就是子组件的updata方法

vue2和Vue3v-model区别

在Vue 2和Vue 3中,v-model的使用和行为大体上是相似的,都是用来创建表单输入和应用状态之间的双向数据绑定。不过,随着Vue 3的推出,有一些细微的差别和改进:

Vue 2 中的 v-model

  1. 基于对象属性:Vue 2 使用 v-model 实现双向绑定时,实际上是在使用 value 属性和 input 事件的一个语法糖。
  2. 组件实现:自定义组件需要定义 value 属性和 input 事件来配合 v-model 的工作。
  3. model 选项:在Vue 2的自定义组件中,可以使用 model 选项来指定一个自定义的事件,而不是默认的 input 事件。

Vue 3 中的 v-model

  1. 基于 createModel 函数:Vue 3 引入了一个新的 createModel 函数,它允许更灵活的双向绑定实现。
  2. 组件实现改进:自定义组件可以使用 modelValue 属性和 update:modelValue 事件来代替Vue 2中的 value 和 input
  3. 模板中的变化:在Vue 3的模板中,应该使用 update:modelValue 来监听更新事件,如上一个警告信息所述,这要求使用全小写并用连字符分隔的事件名。
  4. 性能优化:Vue 3中的 v-model 可以利用Vue 3的性能优化,例如通过避免不必要的渲染来提高效率。

共同点

  • 在两种版本中,v-model 都是用于创建用户输入和应用状态之间的同步。
  • 它们都允许开发者在模板中以一种简洁的方式处理表单输入和应用状态的绑定。

迁移注意事项

如果你正在从Vue 2迁移到Vue 3,需要注意以下几点:

  • 确保在Vue 3中将 v-model 的更新事件监听器更改为使用全小写的连字符命名法,如 update:modelValue
  • 自定义组件可能需要更新以使用新的 modelValue 属性和 update:modelValue 事件。
  • 利用Vue 3的组合式API(如 refreactive)来更好地管理响应式状态。

总的来说,v-model 在Vue 2和Vue 3中的核心概念保持不变,但Vue 3对其进行了一些现代化的改进和优化。


 

三、el-表格(进阶)

1.封装格式化日期工具函数

1.新建 utils/format.js 封装格式化日期函数

javascript">import { dayjs } from 'element-plus'export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

2.导入使用 import { formatTime } from '@/utils/format'

注意这里要用插槽,

javascript"> <el-table-column label="发表时间" prop="pub_date"><template #default="{ row }">{{ formatTime(row.pub_date) }}</template></el-table-column>

2.分页渲染 [element-plus 分页]

1.分页组件

javascript"><el-paginationv-model:current-page="params.pagenum"v-model:page-size="params.pagesize":page-sizes="[2, 3, 4, 5, 10]"layout="jumper, total, sizes, prev, pager, next"background:total="total"@size-change="onSizeChange"@current-change="onCurrentChange"style="margin-top: 20px; justify-content: flex-end"
/>
javascript">const onSizeChange = (size) => {params.value.pagenum = 1params.value.pagesize = sizegetArticleList()
}
const onCurrentChange = (page) => {params.value.pagenum = pagegetArticleList()
}

2.提供分页修改逻辑

loading效果


http://www.ppmy.cn/news/1453399.html

相关文章

go的grpc的三种流模式通信

go的grpc的三种流模式通信 1、grpc通信模式简介2、stream.proto文件3、服务端代码 server.go4、客户端代码client.go5、测试说明 1、grpc通信模式简介 grpc的数据传输可以分为4种模式&#xff1a; 简单模式 (一元调用) 服务端流模式 (服务端返回实时股票数据给前台) 客户端流模…

MySQL——数据库基础

目录 一.数据库的操作 1.显示当前的数据库 2.创建数据库 3.使用数据库 4.删除数据库 一.数据库的操作 1.显示当前的数据库 SHOW DATABASES;2.创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ..…

redis简介、14条常用的redis命令以及执行结果

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据结构存储系统&#xff0c;也可以被视为一个高级的键值存储系统。 与传统的关系型数据库相比&#xff0c;Redis是基于内存的&#xff0c;这使得它具有非常高的读写性能。Redis支持多种数据结构&…

深入解析Floyd Warshall算法:原理、Java实现与优缺点

Floyd Warshall算法的简介 在我们的日常生活中&#xff0c;常常会遇到需要找出两点之间最短路径的问题。比如&#xff0c;从家到公司的最短路线&#xff0c;或者在旅行时&#xff0c;从一个景点到另一个景点的最快路线。 为了解决这类问题&#xff0c;科学家们设计出了许多算法…

算法训练营第55天|LeetCode 392.判断子序列 115.不同的子序列

LeetCode 392.判断子序列 题目链接&#xff1a; LeetCode 392.判断子序列 代码&#xff1a; class Solution { public:bool isSubsequence(string s, string t) {int size_S s.size();int size_T t.size();if(size_S>size_T) return false;int i0,j0;while(i<size_…

vue3--element-plus-抽屉文件上传和富文本编辑器

一、封装组件 article/components/ArticleEdit.vue <script setup> import { ref } from vue const visibleDrawer ref(false)const open (row) > {visibleDrawer.value trueconsole.log(row) }defineExpose({open }) </script><template><!-- 抽…

附录6-4 黑马优购项目-分类和购物车

目录 1 分类 1.1 接口 1.2 窗口限制 1.3 选中状态样式判断 1.4 点击左侧时右侧会到顶点 1.5 源码 2 购物车 2.1 store 2.2 tabBar徽标 2.3 滑动删除 2.4 结算 2.4.1 结算前登录 2.4.2 结算功能 2.5 触发组件事件 2.6 源码 1 分类 分类最上部是…

c++中map与set的基本使用

c中的map容器与set容器 map的所有函数方法及其用法 在C中&#xff0c;std::map 是一个关联容器&#xff0c;它包含可以重复的键值对&#xff08;实际上&#xff0c;std::map中的键是唯一的&#xff09;。每个元素都有一个唯一的键和一个与之关联的值。std::map通常按照其键的…