组件库

Element Plus

是一个基于Vue3的组件库，提供了一系列丰富的UI组件和工具

使用

安装

npm install element-plus --save

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index.js";
import store from "./store/index.js";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

分页组件


<script setup>
    import {ref} from "vue";
    import axios from "../axios/index.js";
    const pageInfo = ref({});
    const showData = (pageNum,pageSize)=>{
        axios.get(`/MoveBooking/page?current=${pageNum}&size=${pageSize}`).then(resp=>{
            pageInfo.value = resp.data
        })
    }
    showData(1,5);

    const handleMove =(id)=>{
        alert(id)
    }
    const handleSizeChange = (pageSize)=>{
        showData(1,pageSize);
    }
    const handleCurrentChange =(pageNum)=>{
        showData(pageNum,pageInfo.value.size)
    }
</script>
<el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:current-page="pageInfo.current"
            v-model:page-size="pageInfo.size"
            :page-sizes="[5, 10, 20, 30]"
            layout="total,sizes, prev, pager, next,jumper"
            :total="pageInfo.total"

            small="small"
            :disabled="disabled"
            background="background"
    />

整体布局

<script setup>

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>H</el-header>
            <el-container class="content">
                <el-aside>导航</el-aside>
                <el-main>主体</el-main>
            </el-container>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>

<style scoped>
.el-header{
    height: 80px;
    background-color: #518FB9;
}
.content{
    min-height: 600px;
}
.el-aside{
    min-width: 180px;
    background-color: gainsboro;
}
.el-footer{
    background-color: #518FB9;
    height: 70px;
}
</style>

图标

  1. 安装

    npm install @element-plus/icons-vue

  2. 注册

    import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

  3. 使用

    <el-icon><Menu /></el-icon>

菜单

router=”true”：设置菜单项的index属性为路由路径

unique-opened=”true”：设置只有一个展开项

<el-menu
                           default-active="2"
                           class="el-menu-vertical-demo"
                           @open="handleOpen"
                           @close="handleClose"
                           router="true"
                           unique-opened="true"
                   >
                       <el-sub-menu index="1">
                           <template #title>
                               <el-icon><Menu /></el-icon>
                               <span>营销管理</span>
                           </template>
                               <el-menu-item index="1-1">销售机会管理</el-menu-item>
                               <el-menu-item index="1-2">客户开发计划</el-menu-item>
                       </el-sub-menu>
                       <el-sub-menu index="2">
                           <template #title>
                               <el-icon><Menu /></el-icon>
                               <span>客户管理</span>
                           </template>
                           <el-menu-item index="2-1"><el-icon><User /></el-icon>客户信息管理</el-menu-item>
                           <el-menu-item index="2-2">客户流失管理</el-menu-item>
                       </el-sub-menu>
                       <el-sub-menu index="3">
                           <template #title>
                               <el-icon><Menu /></el-icon>
                               <span>服务管理</span>
                           </template>
                           <el-menu-item index="3-1">服务创建</el-menu-item>
                           <el-menu-item index="3-2">服务分配</el-menu-item>
                           <el-menu-item index="3-3">服务处理</el-menu-item>
                           <el-menu-item index="3-4">服务反馈</el-menu-item>
                           <el-menu-item index="3-5">服务归档</el-menu-item>
                       </el-sub-menu>
                       <el-sub-menu index="4">
                           <template #title>
                               <el-icon><Menu /></el-icon>
                               <span>统计报表</span>
                           </template>
                           <el-menu-item index="4-1">客户贡献分析</el-menu-item>
                           <el-menu-item index="4-2">客户构成分析</el-menu-item>
                           <el-menu-item index="4-3">客户服务分析</el-menu-item>
                           <el-menu-item index="4-4">客户流失分析</el-menu-item>
                       </el-sub-menu>
                       <el-sub-menu index="5">
                           <template #title>
                               <el-icon><Menu /></el-icon>
                               <span>基础数据</span>
                           </template>
                           <el-menu-item index="/main/dataclient" >
                               数据字典-企业客户等级
                           </el-menu-item>
                           <el-menu-item index="5-2">数据字典-服务类别</el-menu-item>
                           <el-menu-item index="5-3">数据字典-地区</el-menu-item>
                           <el-menu-item index="5-4">用户及权限管理</el-menu-item>
                       </el-sub-menu>
                   </el-menu>

表格模板列使用

  1. 数组深度克隆

    axios.get("/DataClientLevel/getAll").then(resp=>{
        dataClientLevels.value = resp.data;

        changeDataClientLevelList.value = JSON.parse(JSON.stringify(dataClientLevels.value));//clone数组
    })

  2. 代码

    <script setup>
import axios from "../axios/index.js";
import {ref} from "vue";

const dataClientLevels = ref([]);
const changeDataClientLevelList = ref([]);
const showData =()=>{
    axios.get("/DataClientLevel/getAll").then(resp=>{
        dataClientLevels.value = resp.data;

        changeDataClientLevelList.value = JSON.parse(JSON.stringify(dataClientLevels.value));//clone数组
    })
}
const edit = (scope)=>{
    scope.row.edit = true;
}
const cancel = (scope)=>{
    scope.row.edit = false;
    changeDataClientLevelList.value[scope.$index].name = scope.row.name;
}

const save = (scope)=>{
    scope.row.name = changeDataClientLevelList.value[scope.$index].name;
    scope.row.edit = false;
}
showData();
</script>

<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><el-icon><HomeFilled /></el-icon></el-breadcrumb-item>
        <el-breadcrumb-item>基础数据</el-breadcrumb-item>
        <el-breadcrumb-item>企业客户等级管理</el-breadcrumb-item>
    </el-breadcrumb>
<el-table :data="dataClientLevels">
    <el-table-column label="序号" align="center">
        <template #default="scope">
            {{scope.$index+1}}
        </template>
    </el-table-column>
    <el-table-column label="客户等级名称" align="center">
        <template #default="scope">
            <template v-if="scope.row.edit">
                <el-input v-model="changeDataClientLevelList[scope.$index].name"></el-input>
            </template>
            <template v-else>
                {{scope.row.name}}
            </template>
        </template>
    </el-table-column>
    <el-table-column label="对应值(不可编辑)" prop="id" align="center"></el-table-column>
    <el-table-column label="操作" align="center" aria-colspan="2">
        <template #default="scope">
            <template v-if="scope.row.edit">
                <el-button type="primary" size="small" @click.prevent="save(scope)">保存</el-button>
                <el-button type="danger" size="small" @click.prevent="cancel(scope)">取消</el-button>
            </template>
            <template v-else>
                <el-button type="primary" size="small" @click.prevent="edit(scope)">编辑</el-button>
                <el-button type="danger" size="small" @click.prevent="del(scope)">删除</el-button>
            </template>
        </template>
    </el-table-column>
</el-table>

</template>

<style scoped>

</style>

对话框

<el-dialog
      v-model="dialogVisible"
      title="添加客户等级"
      width="30%"
  >
    <div>
      名称：<el-input v-model="clientLevel.name"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addClientLevel">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  
  
  const clientLevel = ref({
  name:''
})

const add = () => {
  dialogVisible.value = true;
}

const addClientLevel = () => {
  axios.post('/DataClientLevel',clientLevel.value).then(resp => {
    if(resp.data){
      showData();
      dialogVisible.value = false;

      clientLevel.value.name = "";
    }
  });
}

提示框

确认框

ElMessageBox.confirm('确定要删除这个项目吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        // 执行删除操作
        axios.delete(`/DataClientLevel/${scope.row.id}`).then(resp=>{
          if(resp.data == true){
            dataClientLevelList.value.splice(scope.$index,1);//删除主数组中数据
            cloneList.value.splice(scope.$index,1);//删除克隆数组中数据

            ElMessage({
              message: '删除成功',
              type: 'success'
            });
          }else{
            ElMessage({
              message: '删除失败',
              type: 'error'
            });
          }
        })
      })
      .catch(() => {
        // 取消删除操作
        // console.log('已取消删除');
      });

消息框

ElMessage({
  message: '删除成功',
  type: 'success'
});

ElMessage({
  message: '删除失败',
  type: 'error'
});

表单

行内表单

inline=”true”：行内显示

<el-form inline="true" size="small">
    <el-form-item label="客户名称">
      <el-input v-model="saleChance.custName" ></el-input>
    </el-form-item>
    <el-form-item label="概要">
      <el-input v-model="saleChance.title" ></el-input>
    </el-form-item>
    <el-form-item label="联系人">
      <el-input v-model="saleChance.linkman" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="danger">清空</el-button>
      <el-button type="primary">查询</el-button>
      <el-button type="primary">新建</el-button>
    </el-form-item>
  </el-form>