本文介绍: Vue – Element UI 使用指南，1. 表格 el–table 2. 弹框 3. 按钮（预授权）4. 组件 template 5. 抽屉 el–drawer 6. 动态生成二维码 二、node.js，论如何引入 node.js 的 util 工具类发送resultfull请求 三、uniapp 1. view 标签 2. onLoad(options) 获取url路径上参数 3. 解决微信开发中 H5 路径中的 “#” 影响跳转更新vue点击事件，disabled失效问题解决
一、Vue – Element UI
1. 表格 el-table
<el-table :data="moneyList" //绑定数据 moneyList
default-sort = "{prop: 'memberMoneyId', order: 'ascending'}" //设置默认根据id升序
>
<el-table-column label="会员记录id" align="center" prop="memberMoneyId" sortable />
//绑定属性 prop，设置居中 align="center"，设置可排序 sortable 或 :sortable="true"
</el-table>
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.memberId)
this.single = selection.length!==1
this.multiple = !selection.length
}<pagination
v-show="total>0"
:total="total"
:page.sync="queryMoneyParams.pageNum"
:limit.sync="queryMoneyParams.pageSize"
@pagination="getMoneyList"
/>2. 弹框
（可嵌套iframe，也可以嵌套table表格或form表单）
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-col :span="24">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="xx" prop="deptmentRoom">
<el-input v-model="form.deptmentRoom" placeholder="请输入xxx" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="xx" prop="deptmentDept">
<el-input v-model="form.deptmentDept" placeholder="请输入xxx" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="xx" prop="post">
<el-input v-model="form.post" placeholder="请输入xx" />
</el-form-item>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>3. 按钮（预授权）
<el-button>默认按钮</el-button>
<el-button type="primary" size="mini">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>//前端按钮 v-hasPermi 预授权
<el-button
@click="handleDelete" //绑定按钮点击事件
label="0" //数值为 0
v-hasPermi="['ubp:member:remove']"
>按钮</el-button>
//后端方法上的校验：（校验权限，防止方法的错误调用或跳过前端直接访问后端方法）
@PreAuthorize("@ss.hasPermi('ubp:member:remove')")
public AjaxResult remove(@PathVariable Long[] memberId简单引入若依的概念：若依是当下较为流行的快捷开发框架，如果你的项目是一个springboot+vue，而且主要做管理系统，那么你可以尝试引入若依进行快速开发，若依有完整的代码结构，包括常用工具类，shiro安全校验，代码生成gen，ApachePOI操作Excel都有所集成。
<!-- right-toolbar 全局组件，在 main.js 文件中引入，工具类，用于隐藏查询条件和刷新
:showSearch 容器中控制显示隐藏
:showSearch.sync 相当于绑定了this.$emit('update:title', newTitle)，
实现了父向子的组件传递，至于绑定的值通常为Boolean值，在data中定义，从而控制组件显隐性
queryTable 刷新数据
-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>4. 组件 template
//用途一，获取后端传来数据，并进行处理时，可以通过 scope.row 获取行（一个对象）进而操作
<el-table-column label="变动金额" align="center" prop="money">
<template slot-scope="scope">
<span v-if="scope.row.status === 0" :style="{ color: 'red' }">
+{{ scope.row.money }}</span>
<span v-if="scope.row.status === 2" :style="{ color: 'blue' }">
-{{ scope.row.money }}</span>
</template>
</el-table-column>
//用途二，加载时间（对时间进行格式化处理）
<el-table-column label="操作时间" align="center" prop="updateTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>5. 抽屉 el-drawer
<el-drawer
title="会员费用记录"
:visible.sync="memberMoney" //绑定是否展示，在data中定义变量，设默认值为false
:direction="direction" //这里绑定抽屉的方向，在data中设置变量direction: "rtl"，表示从右往左的抽屉
:before-close="handleClose" //弹出层右上角X号的回调函数
size="50%" //展示页面占总页面大小
>
<table>xxx</table>
</el-drawer>
<span>{{ parseTime(scope.row.probationTime, '{y}-{m}-{d}') }}</span>6. 动态生成二维码
<!-- 生成绑定微信二维码界面 -->
<el-dialog
title="微信扫码绑定用户"
:visible.sync="isShowCard"
width="400px"
center
:before-close="jieBangClose"
>
<!-- 定义一个展示二维码的div -->
<div style="display: flex; justify-content: center">
<!-- 二维码对象可以通过 ref 绑定 -->
<div id="qrCode" ref="qrCodeDiv"></div>
</div>
</el-dialog>
// 1. 方法调用
bangding(row){
let memberId = row.memberId;
this.isShowCard = true;
if(this.ids != null){
memberId = this.ids[0];
}
this.createQRCode(memberId);
}
//2. 具体的绑定方法
createQRCode(id){
this.$nextTick(()=>{
this.$refs.qrCodeDiv.innerHTML = '';//二维码清除
alert(id)
new QRCode(this.$refs.qrCodeDiv, {
text: "id="+ id,//二维码链接，参数是否添加看需求
width: 200,//二维码宽度
height: 200,//二维码高度
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
});
})
}生成动态二维码详情参考:vue页面动态生成二维码，扫描二维码跳转到微信小程序，同时传递参数_vue生成小程序二维码_coderdwy的博客-CSDN博客
在 v-for 这里弄了很多次也没获取到数据，归结起来数组和对象的区别：
数组，如果数组里面存放的是单纯的值，比如说 [1, 2, 3…], 当前的item就可以指代要查询的值。
如果数组中存放的是一个个对象，比如说 [{name: zhangsan}{name: lisi}], 当前的item指代的是对象集合，要通过 item.name 去指向具体的数据。
<el-form ref="postList" :model="postList" label-width="80px">
<el-form-item v-for="(item, index) in this.postList"
:key="index"
:label="item"
>
<el-input v-model="changeMoney.money" placeholder="请输入充值金额" />
</el-form-item>
</el-form>二、node.js
1. node.js 引入 util.js 工具类
//引入 util 对象，可以通过对象.方法名形式调用其中的方法
const util = require("../../config/util.js")
//使用 util发送请求（默认为get请求，参数有三，url, data, methods)
this.userInfo = {
code: 1,
memberName: "张三",
wxCode: this.code
};
util.request(this.baseUrl + api.url,
this.userInfo, "POST").then(res => {
if(res.code === 200){
this.msg = "绑定成功";
}else{
this.msg = "绑定失败";
}
});三、uniapp
1. view 标签
效果图：
代码：
<template>
<!-- 弹出框 -->
<view class="modal" v-show="showModal">
<view class="modal-content">
<text>{{msg}}</text>
<button class="close" @click="closeModal">关闭</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: "提交信息成功",
showModal: true,
}
},
methods:{
//关闭弹框
closeModal() {
this.showModal = false;
}
}
}
</script>
<!-- 设置：外层弹框页面固定居中位置，内层view固定在弹框层中间 -->
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 200px;
height: 200px;
line-height: 150px;
text-align: center;
margin: auto;
}
</style>2. onLoad(options) 获取url路径上参数
比如：url：http://localhost:8081/test/?code=123456&state=0,0
onLoad(options) {
//设置访问路径端口
this.baseUrl = 'http://localhost:8080/'
this.code = options.code;
this.state = options.state;
}3. 解决微信开发中 H5 路径中的 “#” 影响跳转
解决一个问题最好的办法就是消掉它，所以这里我们将 “#” 进行忽略 。
这里是因为路由导致的，所以只需要修改 H5 的路由模式为 history 即可实现忽略。
在微信开发的博客中有更加详细的介绍，详情参考：微信公众平台开发（测试）实现
2023年 9月 11日更新
Vue 点击事件
<div @contextmenu.prevent.stop="clickRight(value, key)">test</div>
clickRight(value, key){
console.log(value + " " + key)
//具体实现
}//单击
<div @click="clickRight(value, key)">test</div>
//双击
<div @dbclick="clickRight(value, key)">test</div>Disabled 不起效果解决方案
<div :disabled="delabel(row)"></div>
delabel(row){
if(row === '0'){
return false;
}
return true;
}原文地址:https://blog.csdn.net/m0_70876920/article/details/132283877
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_30652.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
