devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端字段如何动态改变（数据库字典项及Vue相关用法）_vue前端字段动态显示

作者：IT小白 | 2024-04-10 13:56:27

赞

踩

vue前端字段动态显示

本文介绍了一些关于Vue中的v-for和v-if的用法，结合数据字典在前段动态显示标签值：

一、前端代码：

（二）orderList.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<link rel="shortcut icon" href="#" />
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.el-input__inner {
    
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app" style="padding-top: 2%;">

			<!-- 面包屑 -->
			<el-breadcrumb separator-class="el-icon-arrow-right" style="padding-bottom: 30px	;">
				<el-breadcrumb-item><a href="welcome.html">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item><a href="">销售管理</a></el-breadcrumb-item>
				<el-breadcrumb-item><a href="">销售订单管理</a></el-breadcrumb-item>
				<el-breadcrumb-item>销售订单查询</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- <hr style="width: 20%;margin-left: 0px;"> -->

			<!-- 查询 -->
			<el-form :inline="true" :model="selectForm" class="demo-form-inline">
				<el-form-item label="订单编号:">
					<el-input title="模糊查询" v-model="selectForm.ordernumber" placeholder="订单编号" maxlength="10" show-word-limit style="width: 180px"
					 clearable></el-input>
				</el-form-item>
				<el-form-item label="订单日期:">
					<el-input title="模糊查询" v-model="selectForm.orderdate" placeholder="订单日期" maxlength="12" show-word-limit style="width: 180px"
					 clearable></el-input>
				</el-form-item>
				<el-form-item label="订单类型:">
					<el-select v-model="selectForm.ordertype" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in orderTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单动作:">
					<el-select v-model="selectForm.orderaction" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in orderActionOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="业务类型:">
					<el-select v-model="selectForm.businesstype" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in businessTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="支付方式:">
					<el-select v-model="selectForm.paytype" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in payTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="配送方式:">
					<el-select v-model="selectForm.transporttype" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in transportTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单状态:">
					<el-select v-model="selectForm.orderstatus" placeholder="全部" style="width: 180px" clearable>
						<el-option v-for="item in orderStatusOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="padding-left: 10%;">
					<el-button type="danger" @click="dialogOfUpload = true" size="medium">上传</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="queryOrder()" size="medium">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="info" @click="refresh()" size="medium">刷新</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="this.status==1" disabled type="success" @click="check()" size="medium" title="将【待出库】订单下所有商品置为【待出库】状态">校验出库单</el-button>
					<el-button v-else type="success" @click="check()" size="medium" title="将【待出库】订单下所有商品置为【待出库】状态">校验出库单</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="this.status==0" disabled type="warning" @click="generate()" size="medium" title='选择【待出库】订单'>生成出库单</el-button>
					<el-button v-else type="warning" @click="generate()" size="medium" title='选择【待出库】订单'>生成出库单</el-button>
				</el-form-item>
			</el-form>

			<span style="padding-left: 2%;font-weight: bold;font-size: 20px;">订单信息表</span>
			<hr>
			<!-- 表格 -->
			<template>
				<el-table @selection-change="handleSelectionChange" :row-style="{
      height:0+'px'}" :cell-style="{
      padding:0+'px'}"
				 :header-cell-style="{
      background:'#F5F7FA',color:'#606266', height:'10px', padding:'0px'}" style="margin-top:10px"
				 highlight-current-row="true" :data="tableData" border style="width: 100%" :default-sort="{prop: 'orderid', order: 'ascending'}">
					<el-table-column align="center" type="selection" width="55"></el-table-column>
					<el-table-column align="center" fixed prop="orderid" label="订单ID" min-width="10%" show-overflow-tooltip="true"
					 sortable>
					</el-table-column>
					<el-table-column align="center" prop="ordernumber" label="订单编号" min-width="10%" sortable>
					</el-table-column>
					<el-table-column align="center" prop="orderdate" label="下单日期" min-width="10%" sortable>
					</el-table-column>
					<el-table-column align="center" prop="ordertype" label="订单类型" min-width="10%" sortable>
						<template slot-scope="scope">
							<span v-for="item in orderTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.ordertype==item.dvalue">{
  {item.dlabel}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="orderaction" label="订单动作" min-width="10%" sortable>
						<template slot-scope="scope">
							<span v-for="item in orderActionOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.orderaction==item.dvalue">{
  {item.dlabel}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="businesstype" label="业务类型" min-width="10%" sortable>
						<template slot-scope="scope">
							<span v-for="item in businessTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.businesstype==item.dvalue">{
  {item.dlabel}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="paytype" label="支付方式" min-width="10%" sortable>
						<template slot-scope="scope">
							<span v-for="item in payTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.paytype==item.dvalue">{
  {item.dlabel}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="transporttype" label="配送方式" min-width="10%" sortable>
						<template slot-scope="scope">
							<span v-for="item in transportTypeOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.transporttype==item.dvalue">{
  {item.dlabel}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="orderstatus" label="订单状态" min-width="10%" sortable>
						<template slot-scope="scope">
							<template v-for="item in orderStatusOptions" :key="item.dvalue" :label="item.dlabel" :value="item.dvalue" v-if="scope.row.orderstatus==item.dvalue">
								<span v-if="scope.row.orderstatus=='1'" style="color: blue;font-weight: bold;">{
  {item.dlabel}}</span>
								<span v-if="scope.row.orderstatus=='2'" style="color: green;font-weight: bold;">{
  {item.dlabel}}</span>
								<span v-if="scope.row.orderstatus=='3'" style="color: red;font-weight: bold;">{
  {item.dlabel}}</span>
							</template>
						</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/399093
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号