【Vue3】用Element Plus实现列表界面

简介: 在编写代码时,我们可以修改vite的默认配置,比如启动后自动打开浏览器、设置ip、端口。vite默认是随机一个端口地址,这里我们可以更改为指定的端口。

🏆今日学习目标:用Element Plus实现列表界面

😃创作者:颜颜yan_

✨个人格言:生如芥子,心藏须弥

⏰本期期数:第四期

🎉专栏系列:Vue3


前言


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


效果图


04fc33f0d4c6410ea0bb4b469509bb5e.png


目录简介


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


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


490e6cd26ac34c3988f9aeafd57ecb6f.png


修改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官网


c8bee483379d4db6b354206c73426ac8.png


Element Plus安装和引用


进入项目目录,在地址栏输入cmd,然后回车,进入项目目录的命令提示符。


017d0292e49c4d23b5df9c1e2d20d1eb.png

18dd2c350547402bad6e27b07f3f1d48.png


输入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是项目的根组件,这里有项目的模板、逻辑和样式。


1.在template中定义一个div,包裹住列表。


2.用el-row和el-col实现行列布局,使用span指定列的宽度,:span=“12” 的意思是50%的宽度,如果要设置100%的宽度,则为 :span=“24” 。设置两个el-col实现搜索框和查询、新增按钮五五分的效果。


3.在第一个el-col标签中添加el-input组件,为搜索框。在第二个el-col标签中添加两个el-button组件,表示查询和新增按钮,并使用@click添加点击事件。


4.使用el-table建立表格,使用 :data设置表格数据绑定,用 style=“width:100%” 设置默认宽度。


5.在table表格中用el-table-column标签设置每一个列,其中prop为主键,label为文案。


6.在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,如下,项目启动成功后就会自动跳转到浏览器啦~


12692831b5d64e9e89a29b4bea138546.png


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


f66849431ba549ed9304ac2f54b451ba.gif

相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
140 64
|
9天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
38 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
39 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
32 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
42 1
|
JavaScript
vue element学习
Vue element 先clonehttps://github.com/ElementUI/element-cooking-starter.git的例子在目录下运行 npm install 安装所需要的nodejs包再运行 npm run dev 可以看到 element的简单例子element...
1614 0
|
3天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
34 1
|
14天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
45 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
32 1

热门文章

最新文章