Vue3使用Element Plus实现列表界面的方法步骤 |
您所在的位置:网站首页 › 利用css样式进行span控制的代码实例有哪些 › Vue3使用Element Plus实现列表界面的方法步骤 |
Vue3使用Element Plus实现列表界面的方法步骤
前言 哈喽大家好,本期我们用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、端口等高级操作。修改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); // 挂载到app app.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中设置搜索函数、回车事件、编辑、删除等函数。 import {ref} from 'vue'; // ref中可以设置默认值 const searchVal = ref() // 回车事件 const enterSearch = () =>{} // 查询事件 const load = () =>{} // 新增事件 const openAdd = () =>{} // 编辑 const handleEdit = () =>{} // 删除 const handleDelete = () =>{} // 表格数据 const tableData = ref([]) 查询 新增 编辑 删除 .container { width: 60%; margin: 100px auto; } .el-button{ /* 增加按钮间距 */ margin-left: 12px; }运行vue项目 在终端进入项目目录,然后输入npm run dev,如下,项目启动成功后就会自动跳转到浏览器啦~ 总结 关于Vue3使用Element Plus实现列表界面的文章就介绍至此,更多相关Vue3 Element Plus实现列表界面内容请搜索编程宝库以前的文章,希望以后支持编程宝库! 下一节:关于vue使用antdesignvue,打包后a-date-picker控件无法选择日期的问题JS 编程技术前端开发后台管理系统,常用的UI库当属Element UI和 Ant Design Vue,但是前段时间遇到一个奇葩问题,在这里记录一下,防止小 ... |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |