VUE3配合案例

案例

确定技术栈：vue3
确定组件库：element-plus
确定网络请求库：axios


实现

步骤：
●创建项目
●安装项目依赖包
●配置使用组件库
●搭建页面结构
●请求数据
●渲染数据

创建项目

npm create vite

安装项目依赖包

npm install element-plus axios

配置使用组件库
main.js

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// import './style.css';
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');
 

搭建页面结构

 

<script setup></script>

<template>
  <div class="app">
    <el-table>
      <el-table-column label="ID"></el-table-column>
      <el-table-column label="姓名" width="150"></el-table-column>
      <el-table-column label="籍贯"></el-table-column>
      <el-table-column label="操作" width="100">
        <template>
          <el-button type="primary" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style>
.app {
  width: 980px;
  margin: 100px auto 100px;
}
</style>
 

 

请求数据

模拟假数据需要的第三方包：

npm install mockjs

npm install vite-plugin-mock

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
    }),
  ],
});

配置假数据，mock在项目根目录下，不是在src目录下。

/mock/index.js

import Mock from 'mockjs'
// 内存模拟数据
const arr = []
for (let i = 0; i < 10; i++) {
  arr.push({
    id: Mock.mock('@guid'),
    name: Mock.mock('@cname'),
    place: Mock.mock('@county(true)'),
  })
}
export default [
  {
    url: '/list',
    method: 'get',
    response: () => {
      return arr
    }
  },
  {
    url: '/del',
    method: 'delete',
    response: ({query}) => {
      const index = arr.findIndex((item) => item.id === query.id)
      arr.splice(index, 1)
      return { success: true }
    }
  }
] 

 渲染数据

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
// 获取列表数据
const list = ref([]);
const geList = async () => {
  const res = await axios.get('/list');
  list.value = res.data;
};

onMounted(() => {
  geList();
});

// 删除数据
const delRow = async (id) => {
  await axios.delete(`/del?id=${id}`);
  geList();
};
</script>
<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" >
        <template v-slot="{ row }">
          <el-button type="primary" link @click="delRow(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style>
.app {
  width: 980px;
  margin: 100px auto 100px;
}
</style>
 

拓展：

编辑表格选中行的值 #default=“scope” 最新版插槽的使用编辑表格选中行的值 #default=“scope” 最新版插槽的使用_HH大魔王的博客-优快云博客