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

最新推荐文章于 2023-03-06 11:11:12 发布
最新推荐文章于 2023-03-06 11:11:12 发布
阅读量1.9k 收藏 6
点赞数 1
分类专栏： 数据库字典 动态改变前端字段 文章标签： mysql 字典 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsssc/article/details/109374589
版权
本文探讨了如何在前端利用Vue的v-for和v-if指令结合后端MySQL或Redis数据字典，动态改变前端字段的显示。通过OrderHandler和OrderGoodsHandler的示例代码，解释了在orderList.html与orderDetail.html中实现这一功能的方法。
摘要由CSDN通过智能技术生成

本文介绍了一些关于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
最低0.47元/天 解锁文章
HssC
关注
专栏目录
odoo15 js 修改前端字段值
fqfq123456的专栏
02-12 799
renderElement: function (ev) { var self = this; $.when(this._super()) .then(function (ev) { rpc.query({ model: 'wenshid.wsdata', method: 'get_sb_list', args: [], }) .then(function (re.
前端修改树形数据的字段名（一步到位）
蜗牛~~
04-12 2113
data: [ { title: "江西", id: 1, children: [ { title: "南昌", id: 1000, children: [ { title: "青山湖区", id: 10001 ...
前端想要把后端接口的字段名改成自己想要的，有以下两种方法
最新发布
yanwu666的博客
03-06 993
【代码】前端想要把后端接口的字段名改成自己想要的，有以下两种方法。
VUE动态展示表格字段
.
03-02 3907
前言 最近叼毛产品让写个需求，动态展示表格字段，要求动态根据用户习惯保存，下次进页面展示以前的，还能再次选择。 思考 让用户选择展示那些字段 保存db 进页面先查询db 然后根据table 字段属性过滤 平时vue页面写的表格类型字段 columnsData: [ { title: '状态', width: 120, align: 'center',
前后端配置动态的数据字段标签（django_vue）
编程知识分享，主打前端
02-15 3万+
动态配置数据字典标签
Aop+自定义注解实现数据字典翻译
Dawn.x的博客
11-30 2404
目录前言源码思维导图 前言 一般来说，项目开发会用自定义注解去实现日志监控等操作 在实际项目中，前后台数据交互时，每次都需要根据一个code值去进行查询数据库进行中间操作进行获取text值 本博文用自定义注解结合aop实现数据字典的自动翻译 源码 首先附上数据库表结构： 数据字典表（dict） 数据字典类型中间表（dict_type） 用户表（user） 注解类（Dict） package com.xiaoyang.annotation; import java.lang.annotation.E
技巧1 python|django接收参数数据类型转换(数组-列表，对象-字典，json)举例用法
yangyangdt的博客
01-04 2205
前后端数据交互的一些传值数据转换。
前端小白基础面试题
qq_45210800的博客
10-24 3603
前端小白总结的一下面试题
【SpringBoot】33、SpringBoot+LayUI后台管理系统开发脚手架
热门推荐
Asurplus
09-05 22万+
本期给大家推荐我自己写一个开源项目：springboot-mini，本着减少大量重复开发工作的原则，使得在项目中能够实现快速开发 1、前言 本项目本着避免重复造轮子的原则，建立一套快速开发JavaWEB项目（springboot-mini），能满足大部分后台管理系统基础开发功能，使得开发人员直接可从业务模块开始，减少大量的重复开发工作。前端框架使用 layui-mini（https://gitee.com/zhongshaofa/layuimini） 2、项目地址 https://gitee.com/asu
如何动态生成列字段？请看向这里哟
Fish_Vast的博客
02-10 1040
🐠一般而言，某个简单查询接口涉及到得表结构不超过三个。如果不是单表操作的话，多个表中间用到联合查询的SQL也可以解决相关问题。但是，事与愿违的是我们的业务是跟着场景走的，并不是所有的业务就仅仅让我们用两三张表就解决问题了。“技术为本，场景为王”！本人是非常认同这种说法的，因为没有好的业务场景，我们开发人员拥有良好的开发技术也没有用武之地。
dictionary:前端字典
04-29
前端字典 有关前端和客户端技术的词典的集合，其中包含定义和示例，已被用于“ ”（版本，并建议所有有关Web技术的俄文文献使用。 一个任务 词典编辑者的任务是为专业交流中接受的术语提供统一的翻译，定义，记录方式和发音，并推荐更成功的新翻译。 原则 词典中选择的词义含糊，比喻或广泛。 词典中未提供用于前端开发的简单单词的翻译。 另外，该词典避免翻译技术和语言的名称，而这些技术和语言通常仍以拉丁文编写。 选择翻译选项时，将优先考虑在专业环境中使用最频繁或在历史上被接受（例如，在印刷术中）的翻译。 参与度 任何人都可以参加字典的编辑。 您可以建议一个新术语，打开翻译讨论区，或者干脆纠正错误或不准确之处。 阅读更多。 外国名字 翻译名称时，请使用。 ，编辑（ 和申科（ Olga Aleksashenko） 。 根据CC-BY-SA 4.0许可证分发。
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo在自己项目里进行封装
前端案例代码_案例分享 | 前端代码是怎样智能生成的 字段绑定篇
weixin_39994806的博客
12-05 293
文 / 笑翟 阿里巴巴原文：https://juejin.im/post/5e4a86c5e51d4526d43f2b3b概述imgcook 是专注以各种图像(Sketch / PSD / 静态图片)为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的前端代码，含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。智能字段绑定是其中一部分，实现准确识别营销以及其他垂直业务视...
字典组件(前端使用)
hufeng19940810的博客
09-30 818
字典组件，方便前端管理字典
前端根据接口字段打电话
xiaoHelloWord的博客
12-23 208
传统是这种直接写上去 在vue中是电话是后端给的，我们需要换种写法要拼接一下 href也是学成 :href 冒号不要忘记了
前端数据字典使用
CenreyH的博客
01-28 1185
前端框架小知识
前端通过点击事件改变点击后标签状态
weixin_48398799的博客
05-27 1515
前端在做点击后改变标签状态的功能时可通过hover和active方法实现，但是此方法不灵活且代码冗余，下面就提供一个绑定动态class实现改变标签状态的方法。 此功能多数存在于循环的li标签中绑定点击事件，点击后改变li标签状态。 ① html代码 <ul> <li v-for="(item, index) in menu" :key="index" @click="change_style(index)" :class="{ change_color: menu_color.
前台实时获取数据库字典并展示
sunyuan005431的博客
07-23 491
前台实时获取数据库字典并展示
Web前端工作笔记001---封装前端数据字典_js 数组filter 总结_详解
添柴程序猿的专栏
09-23 2524
  JAVA技术交流QQ群：170933152  我这里是我封装,前端数据字典的时候,用到的 //数据字典 var dic = function () { var dics; $.ajax({ async: false, type: "get", url: constant.url.sc_admin.dic, da...
JS VUE移动前端实现MYSQL数据库远程实时监控与报警
资源摘要信息:"基于JS和Vue.js开发的移动前端应用，实现了通过向日葵软件远程连接到MYSQL数据库的功能。该应用能够让用户在移动端实时查看数据，并以趋势数据曲线的形式展现，同时具备数据超限报警的功能。" 一、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值