elementui弹窗某些操作会
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了elementui弹窗某些操作会相关的知识，希望对你有一定的参考价值。
ElementUI的弹窗实现步骤条，步骤1，步骤二。1.使用组件 el-steps,里面有上一步和下下一步的方法
2.控制组件 的显示v-show 或者v-if
3.在他们的方法里面改变显示的状态
4.点击一下一步切换显示的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="static/css/admin.css" rel="stylesheet" type="text/css">
<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
<link href="static/css/personal.css" rel="stylesheet" type="text/css">
<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="static/css/bootstrap.css" />
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<!-- 引入样式 -->
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.5/dist/layui.js">
<script type="text/javascript" src="static/js/bootstrap.js" > </script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
</head>
<body>
<div id="container">
<div class="m-order" style="margin-bottom: 0px;height: 160px;">
<div class="s-bar" style="height: 29px;"><i class="s-icon"></i>衣服列表
<a @click="queryByStatus(0)" class="i-load-more-item-shadow">全部衣服</a>
</div>
<ul>
<li style="width: 25%; ">
<a @click="queryByStatus(1)"><i><img src="static/images/send.png"></i> <span>男上装<em class="m-num"
style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(2)"><i><img src="static/images/receive.png"></i> <span>男下装<em class="m-num"
style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(3)"><i><img src="static/images/comment.png"></i> <span>女上装<em class="m-num"
style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>女下装<em class="m-num"
style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(5)"><i><img src="static/images/comment.png"></i> <span>童装专区<em
class="m-num" style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i> <span>鞋靴<em class="m-num"
style="display: none;">0</em></span></a>
</li>
<li style="width: 25%;">
<a @click="queryByStatus(7)"><i><img src="static/images/comment.png"></i> <span>箱包<em class="m-num"
style="display: none;">0</em></span></a>
</li>
</ul>
</div>
<div class="box-container-bottom" style="margin-bottom: 15px;"></div>
<div class="m-logistics">
<!--<div class="s-bar" ><i class="s-icon"></i></div>-->
<div class="s-content">
<ul class="lg-list"></ul>
<el-button type="danger" size="small" @click="add" style="float: right;">新增商品</el-button>
<table class="table" style="height: 5px;">
<tr>
<td width="5%">序号</td>
<td width="20%">商品名</td>
<td width="10%">类别</td>
<td width="10%">销量</td>
<td width="20%">上架时间</td>
<td width="20%">更新时间</td>
<td width="20%">操作</td>
</tr>
<template v-for="product,index in products">
<tr>
<td>index+1</td>
<td>product.productName</td>
<td>product.categoryName</td>
<td>product.soldNum</td>
<td>product.createTime.replace(/T/g, ' ').replace(/.[\d]3Z/, ' ')</td>
<td>product.updateTime.replace(/T/g, ' ').replace(/.[\d]3Z/, ' ')</td>
<td>
<template>
<button class="btn btn-danger btn-xs" @click="changeClothesinfo"
:data-id="index">修改</button>
<button class="btn btn-danger btn-xs" @click="deleteClothes"
:data-id="index">下架</button>
</template>
</td>
</tr>
</template>
<tr>
<td colspan="5">
<!--分页 -->
<el-pagination background layout="prev, pager, next" :current-page="pageNum"
:page-size="limit" :total="count" @current-change="pager"> </el-pagination>
</td>
</tr>
</table>
<!-- 弹窗,新增 -->
<el-dialog v-dialogDrag title="商品添加页面" :visible.sync="dialogFormVisible" class="dialog"
custom-class="dialogs">
<el-steps :space="800" :active="active" finish-status="success">
<el-step title="步骤 1">
</el-step>
<el-step title="步骤 2"></el-step>
</el-steps>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" v-show="show">
<h2 style="text-align: center;"> 商品信息添加</h2>
<el-form-item label="商品名：">
<el-input v-model="product1.productName"></el-input>
</el-form-item>
<el-form-item label="指导价：">
<el-input v-model="product1.productPrice"></el-input>
</el-form-item>
<el-form-item label="一级分类名称：">
<el-select v-model="product1.rootCategoryId" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="二级分类名称：">
<el-select v-model="product1.categoryId" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="细节大图:" labe-width="100">
<el-input type="file" v-model="product1.content"></el-input>
</el-form-item>
<el-form-item label="原价:" labe-width="100">
<el-input v-model="product1.originPrice"></el-input>
</el-form-item>
<el-form-item label="尺码:" labe-width="100">
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">city</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="库存:" labe-width="100">
<el-input v-model="product1.saveNum"></el-input>
</el-form-item>
</el-form>
<el-form label-width="100px" :model="formLabelAlign" v-show="!show">
<h2 style="text-align: center;"> 商品参数信息添加</h2>
<el-form-item label="品牌：">
<el-input v-model="product1.productBrand"></el-input>
</el-form-item>
<el-form-item label="适合年龄:">
<el-input v-model="product1.applicableAge"></el-input>
</el-form-item>
<el-form-item label="面料：">
<el-input v-model="product1.productFabric"></el-input>
</el-form-item>
<el-form-item label="图案：" labe-width="100">
<el-input v-model="product1.productPattern"></el-input>
</el-form-item>
<el-form-item label="袖型:">
<el-input v-model="product1.sleeveType"></el-input>
</el-form-item>
<el-form-item label="袖长:">
<el-input v-model="product1.clothingLength"></el-input>
</el-form-item>
<el-form-item label=" 衣长：">
<el-input v-model="product1.sleevLength"></el-input>
</el-form-item>
<el-form-item label="颜色分类：">
<el-input v-model="product1.productColor"></el-input>
</el-form-item>
<el-form-item label=" 年份季节:" labe-width="100">
<el-radio-group v-model="product1.radio">
<el-radio :label="1">春天</el-radio>
<el-radio :label="2">夏天</el-radio>
<el-radio :label="3">秋天</el-radio>
<el-radio :label="4">冬天</el-radio>
</el-radio-group>
</el-form-item>
<el-el-form-item style="float: right;">
<el-button @click="cancel"> 取消 </el-button>
<el-button type="danger" @click="saveProduct(product1)">保存</el-button>
</el-el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
</div>
</el-dialog>
<div id="wrap" class="wrap">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript">
var cityOptions = ['XL', 'M',"L"];
var layer;
layui.use('layer', function()
layer = layui.layer;
);
var v = new Vue(
el:"#container",
data:
// ------商品尺码
checkAll: true,
checkedCities: ['XL', 'M'],
cities: cityOptions,
isIndeterminate: true,
// ----------
// 一级分类
options: [
value: '选项1',
label: '黄金糕'
,
value: '选项2',
label: '双皮奶'
,
value: '选项3',
label: '蚵仔煎'
,
value: '选项4',
label: '龙须面'
,
value: '选项5',
label: '北京烤鸭'
],
value: '',
// ----
radio: 3,
dialogFormVisible:false,
show:true,
product1: ,
active: 0,
token:"",
pageNum:1,
limit:5,
userId:"",
products:[],
count:0,
status:0,
keyword:""
,
created:function()
this.token = getCookieValue("token");
this.userId = getCookieValue("userId");
//1.加载页面，请求订单信息
var url1 = baseUrl+"admin/manageclothes";
axios(
url:url1,
method:"get",
headers:
token:this.token
,
params:
pageNum:this.pageNum,
limit:this.limit,
status:this.status,
keyword:this.keyword,
).then((res)=>
console.log(res.data.data);
if(res.data.code == 10000)
this.products = res.data.data.list;
this.count = res.data.data.count;
);
,
methods:
// 保存商品
saveProduct(productVO)
console.log(productVO,"product1-------");
var url5=baseUrl+"";
axios(
url:url5,
method:"POST",
data:productVO
).then(res=>
ELEMENT.Message.success("添加地址成功");
this.disabled=true;
)
,
handleCheckAllChange(event)
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
,
handleCheckedCitiesChange(value)
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
,
cancel()
this.dialogFormVisible = false;
,
add()
this.show = true;
this.dialogFormVisible = true;
,
next() this.show = false;
if (this.active++ > 2) this.active = 0;
,
pre() this.show = true;
if (this.active-- < 0) this.active = 0;
,
pager:function(page)
this.pageNum = page;
//1.加载页面，请求订单信息
var url1 = baseUrl+"admin/manageclothes";
var obj =
pageNum:this.pageNum,
limit:this.limit,
keyword:this.keyword,
status:this.status
;
if(this.status!=null)
obj.status = this.status;
axios(
url:url1,
method:"get",
headers:
token:this.token
,
params:obj
).then((res)=>
console.log(res.data.data);
if(res.data.code == 10000)
this.products = res.data.data.list;
this.count = res.data.data.count;
);
,
queryByStatus:function(status)
this.pageNum = 1;
this.status = status;
console.log("插旗")
console.log(this.status);
var url1 = baseUrl+"admin/manageclothes";
/* var parm =
"userId":this.userId,
"pageNum":this.pageNum,
"limit":this.limit,
"status":this.status
; */
axios(
url:url1,
method:"get",
headers:
token:this.token
,
//data: parm
params:
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit,
status:this.status
).then((res)=>
console.log(res.data.data);
if(res.data.code == 10000)
this.products = res.data.data.list;
console.log(res.data.data.list.productName)
this.count = res.data.data.count;
);
,
deleteClothes:function(event)
var index = event.srcElement.dataset.id;
var pid = this.products[index].productId;
var url = baseUrl+"admin/deleteclothes/"+pid;
axios(
url:url,
method:"put",
headers:
token:this.token
).then((res)=>
console.log("下架衣服测试");
//alert("取消成功！")
layer.msg("成功！");
window.location.href="admin-manageclothes.html";
);
,
changeClothesinfo:function(event)
var index = event.srcElement.dataset.id;
var product = this.products[index];
localStorage.setItem("product",JSON.stringify(product));
window.location.href="admin-clothesinfo.html";
,
/* allOrder:function()
this.pageNum = 1;
//this.status = status;
//console.log(this.status);
var url1 = baseUrl+"order/all";
var parm =
"userId":this.userId,
"pageNum":this.pageNum,
"limit":this.limit,
"status":this.status
;
axios(
url:url1,
method:"get",
headers:
token:this.token
,
//data: parm
params:
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit,
//status:this.status
).then((res)=>
console.log(res.data.data);
if(res.data.code == 10000)
this.orders = res.data.data.list;
console.log("插旗")
console.log(res.data.data.list.productName)
this.count = res.data.data.count;
);
, */
);
</script>
</body>
</html> 参考技术A 使用elementUI的表格，做一个增删改的功能。
问题
如下图所示，当修改dialog的内容时，表格也会进行修改的问题。
表格原数据
在这里插入图片描述
第一行的类别名称是AA，当我选中这行数据时，点复制。
在这里插入图片描述
进行复制给弹出框。
在这里插入图片描述
当输入类别名称时，表格的类别名称也进行了相应的修改。
如何解决
这样的情况肯定是有问题的，如何解决呢？
问题出现在：
这样的赋值是有问题的，因为后者是Object对象类型，如果直接赋值，属于浅拷贝，赋值的是地址，会导致弹窗改变值的时候表格随着改变，因为属于一个变量。
所以要改为深拷贝。将赋值操作改为：
这时再来修改，就没有问题了 参考技术B 在使用Element UI点击按钮，弹出dialog对话框，会出现页面抖动的现象，发现弹出dialog时，样式发生了以下变化：
body的style会添加一个padding和hidden
按照以下修改即可：
<style> 参考技术C elementui弹窗某些操作会，使用elementui的dialog弹框页面抖动,会闪一下问题:解决:问题: vue项目中使用了elementui的dialog弹窗,当弹窗出现时。 参考技术D elementui弹窗某些操作会使用elementUI的表格,做一个增删改的功能。
以上是关于elementui弹窗某些操作会的主要内容，如果未能解决你的问题，请参考以下文章
vue elementUI点击输入框弹出弹窗不允许输入框输入