热门标签
热门文章
- 1将dataframe中的某一行提取出来放到另一个dataframe中_将dataframe中某一行的值放进另一个dataframe
- 2爬虫基础（三）——python爬虫常用模块_python爬虫模块
- 3使用虚拟环境virtualenv 创建虚拟环境出现PermissionError: [Errno 13] Permission denied:_virtualenv 'permission denied
- 4物联网通信协议：MQTT协议（qos）——python测试_python mqtt qos
- 5day-2-1-4
- 6yum彻底卸载软件包（包含依赖）_yum卸载
- 7window.print()+element-ui实现前端打印功能_elementui 使用 window.print();
- 8常用图片加载框架比较（Glide、volley、Picasso）_imagerequest glide
- 9CentOS7安装NVIDIA驱动、cuda、cudnn、TensorFlow（未填坑）_错误:软件包:3:nvidia-driver-latest-cuda-460.106.00-1.el
- 10opengl常见面试题_opengl面试题
当前位置: article > 正文
vue3.0项目实战系列文章 - 普通列表查询、分页、增删改、表单的实现_
作者：不正经 | 2024-02-25 07:50:01
赞
踩
目录
效果
-
el-button 的 icon及text有所改变
-
table 的 template有所改变
-
el-pagination写法注意
-
引入子组件写法参照博主其他文章
主页面（父组件）
- 没法讲解了，看代码吧
- 请求接口+分页的逻辑经过时间验证
- <template>
- <div class="table-all-body">
- <div class="content-nav-title">
- <div class="content-nav-title-con">
- <span>菜单管理</span>
- </div>
- </div>
- <div class="content-box-bg">
- <div class="overall-handle-box">
- <el-select filterable v-model="data.now_name" style="width:300px;" @change="systemFlagChange">
- <el-option v-for="item in data.systemFlags" :key="item.id" :label="item.name" :value="item.id">
- </el-option>
- </el-select>
- <el-button class="margin-left12" :icon="CirclePlus" type="primary" @click="addRole">添加菜单</el-button>
- </div>
- <div class="table-body-height-common">
- <el-table border :data="data.historyData" row-key="id">
- <template slot="empty">
- <p>{{data.dataText}}</p>
- </template>
- <el-table-column prop="name" label="名称"></el-table-column>
- <el-table-column label="图标" width="80">
- <template #default="scope">
- <i :class="scope.row.icon"></i>
- </template>
- </el-table-column>
- <el-table-column label="菜单类型" width="120">
- <template #default="scope">
- <span v-if="scope.row.type=='1'">菜单</span>
- <span v-if="scope.row.type=='2'">按钮</span>
- <span v-if="scope.row.type=='0'">目录</span>
- </template>
- </el-table-column>
- <el-table-column prop="flag" label="分类" width="80"></el-table-column>
- <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
- <el-table-column label="路由" width="130">
- <template #default="scope">
- {{scope.row.url==''?'—':scope.row.url}}
- </template>
- </el-table-column>
- <el-table-column label="授权标识" width="300" show-overflow-tooltip>
- <template #default="scope">
- {{scope.row.perms==''?'—':scope.row.perms}}
- </template>
- </el-table-column>
- <el-table-column label="操作" width="170">
- <template #default="scope">
- <el-button @click="handleClick(scope.row)" link size="small" type="primary">编辑</el-button>
- <el-button @click="deleteCommon(scope.row)" link type="danger" size="small">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <el-pagination v-model:currentPage="data.curPage" v-model:page-size="data.pageSize"
- :page-sizes="[5,10, 20, 30, 40]" :small="data.small" layout="total, jumper, prev, pager, next, sizes"
- :total="data.dataCount" @size-change="handleSizeChange" @current-change="changepage"
- class="page-position-common" />
- </div>
- <addMenuPage v-on:onItemChange="getAllDatas" ref="addMenu"></addMenuPage>
- </div>
- </template>
-
- <script lang="ts" setup>
- import addMenuPage from "./children/addMenu.vue";
- import {
- ElMessage
- } from "element-plus";
- import {
- CirclePlus
- } from '@element-plus/icons-vue'
- import {
- menuList,
- menuDelete
- } from "../../request/api.js";
- import {
- ref,
- reactive,
- onMounted,
- } from 'vue';
- const addMenu = ref(); //ref方法是让我们的简单类型数据变成响应式数据；在方法里改变时需要.value来获取
- interface User {
- icon: string
- type: string
- flag: string
- orderNum: string
- url: string
- perms: string
- id: string
- }
- // reactive 数据双向绑定；让我们的复杂类型数据变成响应式数据；不需要.value来获取
- const data = reactive({
- dataText: "", //表格开始置空
- dataCount: 0, //共几条
- pageSize: 10, // 每页显示多少条
- curPage: 1, //第几页
- now_name: "",
- systemFlags: [{
- name: '集约式直饮水智能售水系统',
- id: 'water'
- }, {
- name: '污染源在线监测平台',
- id: 'pollution'
- }, {
- name: '原位实时水质自动监测系统',
- id: 'site'
- }, {
- name: '地表水数字化监测信息管理系统',
- id: 'digitalRiver'
- }, {
- name: '农村污水处理站运行动态管控系统',
- id: 'ruralSewage'
- }, {
- name: '超标废水应急自动拦截系统',
- id: 'interception'
- }, {
- name: '饮用水安全在线监管系统',
- id: 'dwp'
- }, {
- name: 'DR303C',
- id: 'DR303C'
- }],
- historyData: [], //回显到表格的数据
- small: false,
- });
- //获取初始数据
- onMounted(() => {
- if (localStorage.getItem("systemFlag") == undefined) {
- data.now_name = data.systemFlags[0].id;
- } else {
- data.now_name = localStorage.getItem("systemFlag") || '';
- };
- getAllDatas()
- });
- const systemFlagChange = (val: string) => {
- localStorage.setItem("systemFlag", val)
- getAllDatas();
- };
- //表格初始查询
- const getAllDatas = () => {
- data.dataText = "";
- data.historyData = [];
- data.curPage = 1;
- getAllListLink();
- };
- //获取表格列表数据
- const getAllListLink = () => {
- let params = {
- systemFlag: data.now_name,
- pageNum: data.curPage,
- pageSize: data.pageSize,
- }
- menuList(params).then(res => {
- if (res.code == 0) {
- data.dataCount = res.data.total
- if (res.data.total != 0) {
- data.historyData = res.data.list;
- } else {
- data.dataText = "暂无数据";
- }
- } else if (res.code !== 0) {
- data.dataText = "暂无数据";
- ElMessage({
- showClose: true,
- message: res.msg,
- type: 'error',
- })
- }
- })
- };
- //分页改变
- const changepage = (index: number) => {
- data.curPage = index;
- getAllListLink();
- };
- //每页条数切换
- const handleSizeChange = (val: number) => {
- data.curPage = 1;
- data.pageSize = val;
- getAllListLink();
- };
- //删除-接口
- const deleteCommon = (row: User) => {
- let params = {
- id: row.id
- }
- menuDelete(params)
- .then(res => {
- if (res.code == 0) {
- ElMessage({
- showClose: true,
- message: '操作成功',
- type: 'success',
- })
- getAllDatas();
- } else if (res.code !== 0) {
- ElMessage({
- showClose: true,
- message: res.msg,
- type: 'error',
- })
- }
- })
- };
- //添加
- const addRole = () => {
- addMenu.value.addItemShow(data.now_name)
- };
- //编辑
- const handleClick = (row: User) => {
- addMenu.value.addItemShow2(row, data.now_name)
- };
- </script>
- <style scoped>
-
- </style>
子页面
展现
注意：
- defineExpose 注意暴露！！
- el-dialog 需要v-model
- form 的 ref="ruleFormRef" :rules="rules" :model="ruleForm"
-
onSubmit(ruleFormRef)
-
import type { FormInstance } from 'element-plus'编辑器插件版本过高会报错，我直接注释了，等待再次升级！
-
as any[]注意他的使用
-
nextTick的使用
-
push的使用
-
表单验证
源代码：
- <template>
- <div>
- <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
- :append-to-body='true' width="800px">
- <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="150px">
- <el-form-item v-if="data.isAdd" label="所属系统：" prop="system">
- <el-select v-model="ruleForm.system" @change="changeSystem" placeholder="请选择" style="width:300px;">
- <el-option v-for="item in data.systems" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="角色分类：" prop="type">
- <el-select v-model="ruleForm.type" style="width:300px;">
- <el-option v-for="item in data.types" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="角色名称：" prop="name">
- <el-input v-model.trim="ruleForm.name" style="width:300px;" />
- </el-form-item>
- <el-form-item label="角色字符：" prop="key">
- <el-input v-model.trim="ruleForm.key" style="width:300px;" /> ( 定义角色唯一性 )
- </el-form-item>
- <el-form-item label="菜单配置：">
- <div class="jurisdiction-border">
- <el-tree show-checkbox :data="data.treeDatas" node-key="id" ref="treeRef" :check-strictly="true"
- :default-checked-keys="data.nowKeys">
- <template #default="{ node, data }">
- <span class="custom-tree-node">
- <span v-if="data.type == 0||data.type == 1">
- <el-tag :type="data.flag=='app'?'success':''" size="small"> {{data.flag=='app'?'app-菜单':'pc-菜单'}}
- </el-tag>
- <span :title="data.name" class='tree-name-leave'> {{data.name}} </span>
- </span>
- <span v-else>
- <el-tag type="warning" size="small"> {{data.flag}}-按钮 </el-tag>
- <span :title="data.name" class='tree-name-leave'> {{data.name}} </span>
- </span>
- </span>
- </template>
- </el-tree>
- </div>
- </el-form-item>
- <el-form-item>
- <el-button @click="data.children_page = false">取 消</el-button>
- <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script lang="ts" setup>
- import {
- roleInsert,
- roleUpdate,
- menuAll,
- menuRole
- } from "../../../request/api.js";
- import {
- ElMessage,
- ElTree
- } from "element-plus";
- // import type { FormInstance } from 'element-plus'
- import {
- ref,
- reactive,
- nextTick,
- // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
- // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
- // defineExpose//暴露出去;<script setup>直接可用
- } from 'vue';
- const ruleFormRef = ref();//表单ref
- //获取tree选中的值
- const treeRef = ref < InstanceType < typeof ElTree >> ();
- const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)
- //数据双向绑定;复杂类型数据=>响应式数据
- const data = reactive({
- titleName: '',
- checkAll: false,
- children_page: false,
- isAdd: false,
- systems: [{
- name: '集约式直饮水智能售水系统',
- id: 'water'
- }, {
- name: '污染源在线监测平台',
- id: 'pollution'
- }, {
- name: '原位实时水质自动监测系统',
- id: 'site'
- }, {
- name: '地表水数字化监测信息管理系统',
- id: 'digitalRiver'
- }, {
- name: '农村污水处理站运行动态管控系统',
- id: 'ruralSewage'
- }, {
- name: '超标废水应急自动拦截系统',
- id: 'interception'
- }, {
- name: '饮用水安全在线监管系统',
- id: 'dwp'
- }, {
- name: 'DR303C',
- id: 'DR303C'
- }],
- types: [{
- name: '系统',
- id: 'system'
- }, {
- name: '运维',
- id: 'operational'
- }, {
- name: '客户',
- id: 'customer'
- }, {
- name: '普通用户',
- id: 'common'
- }],
- nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
- treeDatas: [], //树-总数据
- id: '',
- });
- //ts类型断言
- //定义类型
- interface User {
- name: string
- type: string
- key: string
- id: string
- };
- const ruleForm = reactive({
- system: "",
- type: "",
- name: "",
- key: "",
- });
- const rules = ref({
- name: [{
- required: true,
- message: '请输入角色名称',
- trigger: 'blur'
- },
- {
- min: 1,
- max: 50,
- message: '长度在 1 到 50 个字符',
- trigger: 'blur'
- }
- ],
- key: [{
- required: true,
- message: '请输入角色字符',
- trigger: 'blur'
- },
- {
- min: 1,
- max: 50,
- message: '长度在 1 到 50 个字符',
- trigger: 'blur'
- }
- ],
- system: [{
- required: true,
- message: '请选择所属系统',
- trigger: 'change'
- }],
- });
- //父调子的子
- const addItemShow = (now_name: string) => {
- data.titleName = '添加角色';
- data.children_page = true;
- data.isAdd = true;
- ruleForm.system = now_name;
- ruleForm.type = '';
- data.nowKeys = []; //树-选中数据
- getTree();
- nextTick(() => {
- ruleFormRef.value.resetFields();//重置表单
- })
- };
- //父调子的子
- const addItemShow2 = (row: User, now_name: string) => {
- data.titleName = '编辑角色';
- data.children_page = true;
- data.isAdd = false;
- nextTick(() => {
- ruleFormRef.value.resetFields();//重置表单
- ruleForm.name = row.name;
- ruleForm.key = row.key;
- ruleForm.system = now_name;
- ruleForm.type = row.type;
- data.id = row.id;
- data.nowKeys = [] //树-选中数据
- data.treeDatas = [] //树-总数据
- menuRoleGet()
- })
- };
- //回显树-选中数据
- const menuRoleGet = () => {
- let params = {
- id: data.id,
- }
- menuRole(params).then(res => {
- if (res.code == 0) {
- if (res.data.list.length != 0) {
- for (var i in res.data.list) {
- data.nowKeys.push(res.data.list[i].id)
- }
- }
- getTree()
- } else if (res.code !== 0) {
- ElMessage.error(res.msg);
- }
- })
- };
- //改变系统时=>获取树数据
- const changeSystem = () => {
- getTree();
- };
- //获取树数据
- const getTree = () => {
- data.treeDatas = [];
- let params = {
- systemFlag: ruleForm.system,
- }
- menuAll(params).then(res => {
- if (res.code == 0) {
- data.treeDatas = res.data.list
- } else if (res.code !== 0) {
- ElMessage.error(res.msg);
- }
- })
- };
- //添加/修改 : FormInstance | undefined
- const onSubmit = async (formEl) => {
- if (!formEl) return
- formEl.validate((valid) => {
- if (valid) {
- if (data.isAdd) {
- addRoles();
- } else {
- changeRoles();
- }
- } else {
- return false;
- }
- });
- };
- //添加接口
- const addRoles = () => {
- let params = {
- systemFlag: ruleForm.system,
- name: ruleForm.name,
- key: ruleForm.key,
- type: ruleForm.type,
- menuIds: treeRef.value!.getCheckedKeys(false),
- }
- roleInsert(params).then(res => {
- if (res.code == 0) {
- ElMessage({
- showClose: true,
- message: '操作成功',
- type: 'success',
- })
- data.children_page = false;
- emit("onItemChange");
- } else if (res.code !== 0) {
- ElMessage.error(res.msg);
- }
- })
- };
- //修改接口
- const changeRoles = () => {
- let params = {
- id: data.id,
- name: ruleForm.name,
- key: ruleForm.key,
- type: ruleForm.type,
- menuIds: treeRef.value!.getCheckedKeys(false),
- }
- roleUpdate(params).then(res => {
- if (res.code == 0) {
- ElMessage({
- showClose: true,
- message: '操作成功',
- type: 'success',
- })
- data.children_page = false;
- emit("onItemChange");
- } else if (res.code !== 0) {
- ElMessage.error(res.msg);
- }
- })
- };
- defineExpose({
- addItemShow,
- addItemShow2
- }) //将子组件方法暴露出来，让父组件调用
- </script>
- <style scoped>
- .jurisdiction-border {
- width: 500px;
- height: 300px;
- padding: 10px;
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
- overflow: auto;
- }
-
- .jurisdiction-border::-webkit-scrollbar {
- width: 7px;
- height: 7px;
- background-color: rgb(241, 241, 241);
- border-radius: 3px;
- }
-
- .jurisdiction-border::-webkit-scrollbar-thumb {
- background-color: rgb(193, 193, 193);
- border-radius: 3px;
- }
-
- .tree-name-leave {
- margin-leave: 5px;
- }
- </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/139684
推荐阅读
相关标签
