欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟

 更新時(shí)間:2023年04月19日 12:44:42   作者:顏顏yan_  
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

哈嘍大家好,本期我們用Element Plus實(shí)現(xiàn)列表界面,我們先用vue+vite創(chuàng)建一個(gè)vue項(xiàng)目,創(chuàng)建項(xiàng)目可以參考:利用vite創(chuàng)建vue3項(xiàng)目噢~

效果圖

目錄簡(jiǎn)介

創(chuàng)建項(xiàng)目成功后,目錄如下??

  • .vscode:vscode的配置文件
  • node_modules:執(zhí)行npm時(shí)初始化的包文件
  • public:存放公共資源
  • src:存放靜態(tài)資源,重要文件
  • components:組件文件夾
  • App.vue:根組件
  • main.js:主函數(shù),全局配置的地方,是全局文件
  • index.html:項(xiàng)目的起始頁(yè)面
  • package.json:項(xiàng)目的配置
  • vite.config.js:vite的項(xiàng)目配置文件,可以配置ip、端口等高級(jí)操作。

修改vite配置文件

在編寫代碼時(shí),我們可以修改vite的默認(rèn)配置,比如啟動(dòng)后自動(dòng)打開瀏覽器、設(shè)置ip、端口。vite默認(rèn)是隨機(jī)一個(gè)端口地址,這里我們可以更改為指定的端口。

打開vite.config.js文件中添加server,將open屬性設(shè)置為true,host設(shè)置ip,port設(shè)置端口。

// vite配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    // 設(shè)置項(xiàng)目啟動(dòng)后默認(rèn)打開瀏覽器
    open:true,
    // 設(shè)置ip
    host:"127.0.0.1",
    // 設(shè)置端口
    port:3000
  }
})

Element Plus簡(jiǎn)介

Element Plus是基于Vue3,面向設(shè)計(jì)師和開發(fā)者的組件庫(kù)。有很多組件模板,可以幫助我們快速完成頁(yè)面噢,推薦~

Element Plus官網(wǎng)

Element Plus安裝和引用

進(jìn)入項(xiàng)目目錄,在地址欄輸入cmd,然后回車,進(jìn)入項(xiàng)目目錄的命令提示符。

輸入npm install element-plus --save進(jìn)行安裝。

npm install element-plus --save

接著在main.js中引入element plus,先使用import引入element plus組件,然后使用use綁定到實(shí)例上面。

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綁定到實(shí)例上面
app.use(ElementPlus);
// 掛載到app
app.mount("#app");

table完成列表界面

在App.vue文件中實(shí)現(xiàn)列表界面,App.vue是項(xiàng)目的根組件,這里有項(xiàng)目的模板、邏輯和樣式。

  1. 在template中定義一個(gè)div,包裹住列表。
  2. 用el-row和el-col實(shí)現(xiàn)行列布局,使用span指定列的寬度,:span=“12” 的意思是50%的寬度,如果要設(shè)置100%的寬度,則為 :span=“24” 。設(shè)置兩個(gè)el-col實(shí)現(xiàn)搜索框和查詢、新增按鈕五五分的效果。
  3. 在第一個(gè)el-col標(biāo)簽中添加el-input組件,為搜索框。在第二個(gè)el-col標(biāo)簽中添加兩個(gè)el-button組件,表示查詢和新增按鈕,并使用@click添加點(diǎn)擊事件。
  4. 使用el-table建立表格,使用 :data設(shè)置表格數(shù)據(jù)綁定,用 style=“width:100%” 設(shè)置默認(rèn)寬度。
  5. 在table表格中用el-table-column標(biāo)簽設(shè)置每一個(gè)列,其中prop為主鍵,label為文案。
  6. 在script中設(shè)置搜索函數(shù)、回車事件、編輯、刪除等函數(shù)。
<script setup>
import {ref} from 'vue';
// ref中可以設(shè)置默認(rèn)值
const searchVal = ref() 
// 回車事件
const enterSearch = () =>{}
// 查詢事件
const load = () =>{}
// 新增事件
const openAdd = () =>{}
// 編輯
const handleEdit = () =>{}
// 刪除
const handleDelete = () =>{}
// 表格數(shù)據(jù)
const tableData = ref([])
</script>
<!-- 模板 -->
<template>
  <div class="container">
    <!-- 行列布局 -->
    <el-row>
      <!-- span指定列的寬度 -->
      <el-col :span="12">
        <!-- 搜索框 -->
        <!-- 通過(guò)v-model做數(shù)據(jù)綁定 -->
        <el-input v-model="searchVal" placeholder="請(qǐng)輸入要搜索的關(guān)鍵字" 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表格 -->
    <!-- 表格數(shù)據(jù)綁定和默認(rèn)寬度 -->
    <el-table :data="tableData" style="width:100%">
      <!-- 每一個(gè)列,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="價(jià)格"></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>

運(yùn)行vue項(xiàng)目

在終端進(jìn)入項(xiàng)目目錄,然后輸入npm run dev,如下,項(xiàng)目啟動(dòng)成功后就會(huì)自動(dòng)跳轉(zhuǎn)到瀏覽器啦~

總結(jié)

到此這篇關(guān)于Vue3使用Element Plus實(shí)現(xiàn)列表界面的文章就介紹到這了,更多相關(guān)Vue3 Element Plus實(shí)現(xiàn)列表界面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論