哈喽大家好,本期我们用Element Plus实现列表界面,我们先用vue+vite创建一个vue项目,创建项目可以参考:利用vite创建vue3项目噢~
创建项目成功后,目录如下👇
在编写代码时,我们可以修改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是基于Vue3,面向设计师和开发者的组件库。有很多组件模板,可以帮助我们快速完成页面噢,推荐~ 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");
在App.vue文件中实现列表界面,App.vue是项目的根组件,这里有项目的模板、逻辑和样式。
<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>
在终端进入项目目录,然后输入npm run dev,如下,项目启动成功后就会自动跳转到浏览器啦~
以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏,持续更新呢~ 咱们下期再见~