位置: IT常识 - 正文

【Vue3】用Element Plus实现列表界面(vue3 element ui)

编辑:rootadmin
【Vue3】用Element Plus实现列表界面

推荐整理分享【Vue3】用Element Plus实现列表界面(vue3 element ui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3+element,elements vue,vue3+element,vue3.0 element,element支持vue3,vue3+element,vue3+element,vue怎么用elementui,内容如对您有帮助,希望把文章链接给更多的朋友!

🏆今日学习目标:用Element Plus实现列表界面 😃创作者:颜颜yan_ ✨个人格言:生如芥子,心藏须弥 ⏰本期期数:第四期 🎉专栏系列:Vue3

文章目录前言效果图目录简介修改vite配置文件Element Plus简介Element Plus安装和引用table完成列表界面运行vue项目总结前言

哈喽大家好,本期我们用Element Plus实现列表界面,我们先用vue+vite创建一个vue项目,创建项目可以参考:利用vite创建vue3项目噢~

效果图

目录简介

创建项目成功后,目录如下👇

.vscode:vscode的配置文件node_modules:执行npm时初始化的包文件public:存放公共资源src:存放静态资源,重要文件components:组件文件夹App.vue:根组件main.js:主函数,全局配置的地方,是全局文件index.html:项目的起始页面package.json:项目的配置vite.config.js:vite的项目配置文件,可以配置ip、端口等高级操作。【Vue3】用Element Plus实现列表界面(vue3 element ui)

修改vite配置文件

在编写代码时,我们可以修改vite的默认配置,比如启动后自动打开浏览器、设置ip、端口。vite默认是随机一个端口地址,这里我们可以更改为指定的端口。 打开vite.config.js文件中添加server,将open属性设置为true,host设置ip,port设置端口。

// vite配置文件import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], server:{ // 设置项目启动后默认打开浏览器 open:true, // 设置ip host:"127.0.0.1", // 设置端口 port:3000 }})Element Plus简介

Element Plus是基于Vue3,面向设计师和开发者的组件库。有很多组件模板,可以帮助我们快速完成页面噢,推荐~ Element Plus官网

Element Plus安装和引用

进入项目目录,在地址栏输入cmd,然后回车,进入项目目录的命令提示符。 输入npm install element-plus --save进行安装。

npm install element-plus --save

接着在main.js中引入element plus,先使用import引入element plus组件,然后使用use绑定到实例上面。

import { createApp } from "vue";// 引入组件App,app.vue是根组件import App from "./App.vue";import ElementPlus from "element-plus";import "element-plus/dist/index.css";const app = createApp(App);// 使用use绑定到实例上面app.use(ElementPlus);// 挂载到appapp.mount("#app");table完成列表界面

在App.vue文件中实现列表界面,App.vue是项目的根组件,这里有项目的模板、逻辑和样式。

在template中定义一个div,包裹住列表。用el-row和el-col实现行列布局,使用span指定列的宽度,:span=“12” 的意思是50%的宽度,如果要设置100%的宽度,则为 :span=“24” 。设置两个el-col实现搜索框和查询、新增按钮五五分的效果。在第一个el-col标签中添加el-input组件,为搜索框。在第二个el-col标签中添加两个el-button组件,表示查询和新增按钮,并使用@click添加点击事件。使用el-table建立表格,使用 :data设置表格数据绑定,用 style=“width:100%” 设置默认宽度。在table表格中用el-table-column标签设置每一个列,其中prop为主键,label为文案。在script中设置搜索函数、回车事件、编辑、删除等函数。<script setup>import {ref} from 'vue';// ref中可以设置默认值const searchVal = ref() // 回车事件const enterSearch = () =>{}// 查询事件const load = () =>{}// 新增事件const openAdd = () =>{}// 编辑const handleEdit = () =>{}// 删除const handleDelete = () =>{}// 表格数据const tableData = ref([])</script><!-- 模板 --><template> <div class="container"> <!-- 行列布局 --> <el-row> <!-- span指定列的宽度 --> <el-col :span="12"> <!-- 搜索框 --> <!-- 通过v-model做数据绑定 --> <el-input v-model="searchVal" placeholder="请输入要搜索的关键字" class="input-with-select" @keyup.enter="enterSearch"> </el-input> </el-col> <!-- 查询、新增按钮 --> <el-col :span="12"> <el-button type="primary" @click="load">查询</el-button> <el-button type="primary" @click="openAdd">新增</el-button> </el-col> </el-row> <!-- table表格 --> <!-- 表格数据绑定和默认宽度 --> <el-table :data="tableData" style="width:100%"> <!-- 每一个列,prop为主键,label为文案 --> <!-- 索引 --> <el-table-column type="index" width="50"></el-table-column> <el-table-column prop="img" label="图片" width="180"></el-table-column> <el-table-column prop="title" label="书名" width="180"></el-table-column> <el-table-column prop="author" label="作者" width="180"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="remarks" label="备注"></el-table-column> <el-talble-column label="操作"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button> </template> </el-talble-column> </el-table> </div></template><style scoped>.container { width: 60%; margin: 100px auto;}.el-button{ /* 增加按钮间距 */ margin-left: 12px;}</style>运行vue项目

在终端进入项目目录,然后输入npm run dev,如下,项目启动成功后就会自动跳转到浏览器啦~

总结

以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏,持续更新呢~ 咱们下期再见~

本文链接地址:https://www.jiuchutong.com/zhishi/295224.html 转载请保留说明!

上一篇:一只华莱士飞蛙掠过森林地面 (© Stephen Dalton/Minden Pictures)

下一篇:javaweb案例一(javaweb简单项目案例)

  • 铜川缴纳房屋契税怎么算
  • 个人独资企业增值税税率是多少
  • 融资租赁担保余值
  • 开发区代管
  • 购买的车位是否有产权证
  • 公司因担保产生损失
  • 多层股权结构设计控制法
  • 无偿受让股权的股东对发起股东没有出资承担责任
  • 企业所得税成本确认原则
  • 发票的审核之真假发票的查验
  • 二季度支出小于一季度什么意思
  • 打款与发票开具的会计处理方法是怎样的
  • 劳务服务公司业务范围
  • 工会经费什么时候返还给企业
  • 投资性房地产处置时公允价值变动损益
  • 不计提折旧的固定资产是()
  • 待摊费用做账
  • 异常抵扣凭证进项税转出入哪个所属期
  • 公司与股东的往来款现金流量表
  • 企业代扣员工社保怎样做分录
  • 亏损的结转分录
  • 现金流量表的编制基础是权责发生制
  • php关联数组转索引数组
  • linux系统中怎么创建目录
  • scchost.exe - scchost是什么进程 有什么用
  • jdk1.8环境变量设置
  • php字符串函数有哪些
  • 应付税款法账务处理
  • 工会经费是职工工资总额的
  • 私车公用维修费属于个人承担吗
  • jusched.exe
  • 系统win7旗舰版
  • 以前年度损益调整结转到哪里
  • javascript中文手册
  • 企业所得税品目应纳税所得额未申报
  • 固定资产停止使用
  • 6月发5月工资怎么做账
  • 货币捐赠会计分录
  • 可转债公允价值评估
  • 认缴制注册资金不交可以吗
  • 如何查询金税盘发票金额及开票数量
  • 销售收入未及时入账
  • 其他综合收益相关分录
  • 库存现金错账怎么调整
  • 民间非营利组织会计制度及操作实务
  • 视同销售的增值税是如何计算?
  • 内部往来划账通知单
  • 坏账损失的会计核算方法
  • 项目评审结果
  • 申报抵扣
  • 应收账款收不回来怎么处理分录
  • 现金股利征收个人所得税吗
  • 一般户可以发工资有什么后果
  • 工程施工发生的酒水费会计分录
  • sql判断是否存在记录
  • c#如何使用数据库
  • Mac下mysql 5.7.17 安装配置方法图文教程
  • 注册表隐藏桌面图标
  • windows 进程管理
  • vs显示进程已退出
  • win8系统怎么清理缓存
  • win10周年版
  • ubuntu20.04关闭图形界面命令
  • 苹果mac电脑怎么复制粘贴
  • 如何管理和维护宿舍卫生
  • rtos用什么语言
  • Windows 7 OpenGL配置,解决“无法启动此程序,因为计算机中丢失glut32.dll。”
  • linux中argv
  • ubuntu不待机
  • linux 网卡 配置
  • 设置拉我进群必须经过我同意
  • jquery常用操作
  • 检测shell脚本语法错误的命令
  • android内存泄露监测
  • js判断数据是否存在
  • android 动态添加控件
  • jquery打开文件对话框
  • 如何查询车辆购买的保险
  • 江苏省定额规则
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设