vue.js3+element-plus+typescript add,edit,del,search

geovindu2024-08-28 9:10

vite.config.ts

TypeScript 复制代码 
server: {
  cors: true, // 默认启用并允许任何源
  host: '0.0.0.0', // 这个用于启动
  port: 5110, // 指定启动端口
  open: true, //启动后是否自动打开浏览器  
  proxy: {
      '/api': {
        target: 'http://localhost:8081/',  //实际请求地址，数据库的rest APIs
        changeOrigin: true      
      },
 }

数据来源于前面文章的介绍的方式

TypeScript 复制代码 
import axios from "axios";

/* eslint-disable class UserinfoDataService*/
/**
 * Userinfo Rest API
 * 和前文章的各数据操作，可以用其一任一种
 */
class UserinfoDataService
{


  /**
   * 查看所有记录    getAll():Promise<any> {
   * @returns 
   */ 
  getAllData(){
    
    axios.get('/api/userinfos')
    .then(response=>{
        console.log(response.data);
        return response.data;
    })
    .catch(error=>{
        console.log(error);
        return null
    });
    //console.log(axios.get("/tutorials"));
   // return axios.get("/api/tutorials");// http.get("/tutorials");//



  }

/**
 * 2 查询所有记录
 */
getAll(): Promise<any>{

  return axios.get("/api/userinfos");// http.get("/tutorials");//
}

/**
 * 登录
 * @param userName 
 * @param userPassword 
 * @returns 
 */
userlogin(userName:any,userPassword:any):Promise<any> 
{
  return axios.get(`/api/userinfos/?userName=${userName}&userPassword=${userPassword}`);
}

  /**
   * 查询一条记录
   * @param id 
   * @returns 
   */
  get(id: any): Promise<any> {
    console.log(id);
    
    return axios.get(`/api/userinfos/${id}`);//http.get(`/api/tutorials/${id}`);
  }
  /**
   * 添加
   * @param data 
   * @returns 
   */
  create(data: any): Promise<any> {



    return axios.post("/api/userinfos", data);
  }
  /**
   * 更新
   * @param id 
   * @param data 
   * @returns 
   */
  update(id: any, data: any): Promise<any> {
    return axios.put(`/api/userinfos/${id}`, data);
  }


  /**
   * 删除
   * @param id 
   * @returns 
   */
  delete(id: any): Promise<any> {
    return axios.delete(`/api/userinfos/${id}`);
  }

  /**
   *删除所有
   * @returns 
   */
  deleteAll(): Promise<any> {
    return axios.delete(`/api/api/userinfos`);
  }
  /**
   * 查找
   * @param username 
   * @returns 
   */
  findByTitle(username: string): Promise<any> {
    return axios.get(`/api/userinfos?username=${username}`);
  }
}
// new TutorialDataService()
export default new UserinfoDataService();

调用：

TypeScript 复制代码 
<!--
*
 * _______________#########_______________________ 
 * ______________############_____________________ 
 * ______________#############____________________ 
 * _____________##__###########___________________ 
 * ____________###__######_#####__________________ 
 * ____________###_#######___####_________________ 
 * ___________###__##########_####________________ 
 * __________####__###########_####_______________ 
 * ________#####___###########__#####_____________ 
 * _______######___###_########___#####___________ 
 * _______#####___###___########___######_________ 
 * ______######___###__###########___######_______ 
 * _____######___####_##############__######______ 
 * ____#######__#####################_#######_____ 
 * ____#######__##############################____ 
 * ___#######__######_#################_#######___ 
 * ___#######__######_######_#########___######___ 
 * ___#######____##__######___######_____######___ 
 * ___#######________######____#####_____#####____ 
 * ____######________#####_____#####_____####_____ 
 * _____#####________####______#####_____###______ 
 * ______#####______;###________###______#________ 
 * ________##_______####________####______________ 
 * 
 * @Author: geovindu
 * @Date: 2024-08-26 19:55:02
 * @LastEditors: geovindu
 * @LastEditTime: 2024-08-27 20:24:32
 * @FilePath: \vue\vuetest\src\components\tablebind.vue
 * @Description: geovindu
 * @lib,packpage: 
 * 
 * @IDE: vscode
 * @jslib: node 20 vue.js 3.0
 * @OS: windows10
 * @database: mysql 8.0  sql server 2019 postgreSQL 16
 * Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved. 
 -->
 
 <template>
    <div style="padding: 10px"> 
        <ElConfigProvider :locale="zhCn">
        <ElInput style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></ElInput>
        <ElButton type="primary" @click="search" style="margin-left: 5px">查询数据</ElButton>
 
        <ElButton type="primary" @click="handleAdd">新增数据</ElButton>
 
        <div style="margin: 10px 0">
            <ElTable :data="paginatedData" border style="width: 100%">  
                <ElTableColumn prop="id" label="ID" width="20"/>     
                <ElTableColumn prop="userName" label="用户名" width="80"/>        
                <ElTableColumn prop="userReal" label="姓名" width="80"/>
                <ElTableColumn prop="userPassword" label="密码"/>
                <ElTableColumn prop="userIsOk" label="否可用"/>
                <ElTableColumn prop="userMail" label="邮件"/>
                <ElTableColumn prop="userMobile" label="手机号码"/>
                <ElTableColumn prop="createdAt" label="日期" width="80"/>
                <ElTableColumn label="操作">
                    <template #default="scope">
                        <ElButton type="text" size="small" @click="handleEdit(scope.row, scope.$index)">编辑</ElButton>  
                        <ElButton type="danger" size="small" @click.prevent="remove(scope.$index)">删除</ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <div class="pagination-block">  
        <ElPagination  
          background  
          layout="prev, pager, next, jumper, total, sizes"  
          :current-page="state.page"  
          :page-size="state.limit"  
          :page-sizes="[10, 20, 30, 40]"  
          :total="total"  
          @current-change="handleCurrentChange"  
          @size-change="handleSizeChange"  
        />  
      </div>  
        </div>
 
        <!--弹窗-->
        <ElDialog v-model="dialogFormVisible" title="信息" width="40%">
            <ElForm :model="form" label-width="100px" style="padding-right:30px ">
                <ElFormItem label="ID">
                    <ElInput v-model="form.id" autocomplete="off"/>
                </ElFormItem>                
                <ElFormItem label="用户名">
                    <ElInput v-model="form.userName" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="姓名">
                    <ElInput v-model="form.userReal" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="密码">
                    <ElInput v-model="form.userPassword" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="邮件">
                    <ElInput v-model="form.userMail" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="手机号码">
                    <ElInput v-model="form.userMobile" autocomplete="off"/>
                </ElFormItem>
                <ElFormItem label="是否可用">
                    <ElCheckbox v-model="form.userIsOk"/>
                </ElFormItem>
                <ElFormItem label="日期">                    
                    <ElDatePicker
        v-model="form.createdAt"
        type="date"
        placeholder="Pick a day"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"        
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
      />     
      </ElFormItem>

            </ElForm>
            <template #footer>
      <span class="dialog-footer">
        <ElButton @click="dialogFormVisible = false">取消</ElButton>
        <ElButton type="primary" @click="save">确认</ElButton>
      </span>
            </template>
        </ElDialog>
    </ElConfigProvider>
    </div>
</template>
<script lang="ts" setup>
  import { ElMessageBox,ElTable,ElButton,ElTableColumn,ElDialog,ElForm,ElFormItem,ElInput,ElDatePicker,ElConfigProvider,ElCheckbox } from "element-plus";
 //https://element-plus.org/zh-CN/guide/i18n.html
  import zhCn from 'element-plus/es/locale/lang/zh-cn'//中文
  import {reactive, ref,computed} from "vue";
  import  UserinfoDataService from "../services/UserinfoDataService";
  import router from "@/router"; //路由配置文件
  import Crypoto from "../common/Cryptographer"; //；加密

    const total=ref(0);
  
     //
  const state = reactive({  
    page: 1,  
    limit: 10,  
  });  


  // 计算属性用于分页  
  const paginatedData = computed(() => {  
  const start = (state.page - 1) * state.limit;  
  const end = start + state.limit;  
  total.value=tableData.value.length;
    return tableData.value.slice(start, end);  
  });  
    
  // 改变页码  
  const handleCurrentChange = (e: number) => {  
    state.page = e;  
  };      
  // 改变页数限制  
  const handleSizeChange = (e: number) => {  
    state.limit = e;  
  };  

    //https://element-plus.org/zh-CN/component/date-picker
    const size = ref<'default' | 'large' | 'small'>('default');
    const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

    //
    const tableData = ref([{}]);
    //读数据
    UserinfoDataService.getAll().then(response=>{     
                  console.log("class处理成功情况2");
                  console.log(response.data);
                  tableData.value=response.data;

              })
              .catch(error=>{
                  console.log(error);
              });
     
    const dialogFormVisible = ref(false)
    const form = reactive({
        id:total,
        userName:"",
        userReal:"",
        userPassword:"",
        userIsOk:false,
        userMail:"",
        userMobile:"",
        createdAt:""

    })
    //全局保存编辑的行号
    const globalIndex = ref(-1)
    const name = ref('')
 
    //新增数据 设置新的空的绑值对象 打开弹窗
    const handleAdd = () => {
        //生成最大的ID
        form.id=tableData.value.length+1;
        form.userName = '';  
        form.userReal="";
        form.userPassword = '';  
        form.userIsOk = false;
        form.userMail="";
        form.userMobile="";
        form.createdAt="";
        dialogFormVisible.value = true;
    }
 
    //保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
    const save = () => {
        if (globalIndex.value >= 0) {
            //表示编辑
            tableData.value[globalIndex.value,20] = form    
            //还原回去
            globalIndex.value = -1

            UserinfoDataService.update(form.id,form); //修改成功 （密码需要加密一下)
            
            router.push('tablebind')

        } else {

            //新增
            tableData.value.push(form)
            UserinfoDataService.create(form); //添加成功！（密码需要加密一下)
            router.push('tablebind')
        }
 
        dialogFormVisible.value = false
    }
 
    //编辑数据 先赋值到表单再弹窗
    const handleEdit = (row: {id:number, userName: string; userReal:string,userPassword: string; userIsOk:boolean,userMail:string,userMobile:string,createdAt:string}, index: number) => {
        const newObj = Object.assign({}, row)
        form.id=newObj.id;
        form.userName =newObj.userName;
        form.userReal=newObj.userReal;
        form.userPassword=newObj.userPassword;
        form.userIsOk=newObj.userIsOk;
        form.userMail=newObj.userMail; //.toLocaleDateString()
        form.userMobile=newObj.userMobile;
        form.createdAt=newObj.createdAt;
        console.log(form);
        // reactive(newObj)
        //把当前编辑的行号赋值给全局保存的行号
        globalIndex.value = index;
        console.log(globalIndex.value);
        dialogFormVisible.value = true;
        
    }
 
    //删除数据 从index位置开始，删除一行即可 删除前有一个提示为好
    const remove = (index:any) => {
        tableData.value.splice(index, 1)

       // UserinfoDataService.delete(form.id) //删除

    }
    
    //查询数据有问题,需要修改
    const search = () =>{

        tableData.value = tableData.value.filter(v =>v.userName.includes(form.userName)) //userName.value

       // UserinfoDataService.getAll(form.userName)
    }
</script>

还有BUG，待完善

输出：

相关推荐
JerryXZR5 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香7 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596939 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai15 分钟前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91524 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼1 小时前
Python教程：python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦7 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play