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: 0pxheight: 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]{3}Z/, ' ')}}</td>
<td>{{product.updateTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</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>
1
第一步在我们的电脑上打开软件，新建一个html，并添加上layui的js和css文件，如下图所示：
2
第二步我们打开新建的html文件,在<head>标签里面引入layui.css，layui.js文件，如下图所示：
3
第三步我们开始写body页面内容，这里给的表格内容是layui的表格示例数据，如下图所示：
4
第四步我们最后来给表格数据添加点击事件，table.on('tool(demoEvent)', function(obj){}来监听单元格事件，layer.prompt()弹出框，使用 obj.update({ sign: value })进行更新表格和缓存，如下图所示：
5
第五步我们在浏览器中打开html页面，可以看到表格数据内容，如下图所示：
6
第六步我们点击表格数据内容，弹出框显示单元格里面的数据，可以看到通过layui，给表格数据添加了点击事件，如下图所示：
