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

最新推荐文章于 2024-07-07 05:00:00 发布
最新推荐文章于 2024-07-07 05:00:00 发布
阅读量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
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字典组件(前端使用)
hufeng19940810的博客
09-30 761
字典组件，方便前端管理字典
el-table数据从字典中取值
半兽先生的博客
01-16 692
【代码】el-table数据从字典中取值。
前端数据字典最优方案讨论
最新发布
Andrew_Chenwq的博客
07-07 1142
数据字典是项目中常用的数据维护方式之一，其优势在于用户可以自行配置数据类型，并且在不需要更新系统的情况下，将数据下发到客户端。字典是一种数据结构，它由键值对组成，其主要特点是键与值之间是一一对应的关系。在字典中，键是唯一且无序的，而值可以重复。键通常用于在前后端之间进行数据传输或在代码中进行逻辑判断，而值则用于向用户展示相关信息。因此，字典提供了一种便捷的方式来存储和管理数据，同时确保了数据的唯一性和关联性。一种常见的实现方式是。
VUE动态展示表格字段
.
03-02 3795
前言 最近叼毛产品让写个需求，动态展示表格字段，要求动态根据用户习惯保存，下次进页面展示以前的，还能再次选择。 思考 让用户选择展示那些字段 保存db 进页面先查询db 然后根据table 字段属性过滤 平时vue页面写的表格类型字段 columnsData: [ { title: '状态', width: 120, align: 'center',
前端案例代码_案例分享 | 前端代码是怎样智能生成的 字段绑定篇
weixin_39994806的博客
12-05 270
文 / 笑翟 阿里巴巴原文：https://juejin.im/post/5e4a86c5e51d4526d43f2b3b概述imgcook 是专注以各种图像(Sketch / PSD / 静态图片)为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的前端代码，含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。智能字段绑定是其中一部分，实现准确识别营销以及其他垂直业务视...
如何动态生成列字段？请看向这里哟
Fish_Vast的博客
02-10 1001
🐠一般而言，某个简单查询接口涉及到得表结构不超过三个。如果不是单表操作的话，多个表中间用到联合查询的SQL也可以解决相关问题。但是，事与愿违的是我们的业务是跟着场景走的，并不是所有的业务就仅仅让我们用两三张表就解决问题了。“技术为本，场景为王”！本人是非常认同这种说法的，因为没有好的业务场景，我们开发人员拥有良好的开发技术也没有用武之地。
dictionary:前端字典
04-29
前端字典 有关前端和客户端技术的词典的集合，其中包含定义和示例，已被用于“ ”（版本，并建议所有有关Web技术的俄文文献使用。 一个任务 词典编辑者的任务是为专业交流中接受的术语提供统一的翻译，定义，记录方式和发音，并推荐更成功的新翻译。 原则 词典中选择的词义含糊，比喻或广泛。 词典中未提供用于前端开发的简单单词的翻译。 另外，该词典避免翻译技术和语言的名称，而这些技术和语言通常仍以拉丁文编写。 选择翻译选项时，将优先考虑在专业环境中使用最频繁或在历史上被接受（例如，在印刷术中）的翻译。 参与度 任何人都可以参加字典的编辑。 您可以建议一个新术语，打开翻译讨论区，或者干脆纠正错误或不准确之处。 阅读更多。 外国名字 翻译名称时，请使用。 ，编辑（ 和申科（ Olga Aleksashenko） 。 根据CC-BY-SA 4.0许可证分发。
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo...
基于SSM的医院预约挂号系统源码+项目说明+数据库（前端使用Vue，数据axios）.zip
01-10
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于SSM的医院预约挂号系统源码+项目说明+数据库（前端使用Vue，数据axios
数据库课设-前后端分离的家谱项目 客户端开发：springboat 数据库：mysql 前端：VUE
11-16
这个项目使用了SpringBoot作为后端框架，MySQL作为数据库管理系统，以及Vue.js作为前端技术栈。下面将分别对这三个主要组件进行详细阐述。 首先，SpringBoot是Java的一种轻量级框架，它简化了传统Spring应用的开发...
使用VUE自定义组件封装数据字典实战
03-07
在Vue开发中，数据字典的管理是必不可少的，它涉及到对系统中各种常量值的维护，如性别、证件类型、审批状态等。为了提高代码的可复用性和维护性，我们可以对这些常见的功能进行封装，特别是对于前端展现常用的下拉...
vue动态删除从数据库倒入列表的某一条方法
12-04
在Vue.js中，动态操作列表数据是常见的需求，如题目所示，我们需要实现从数据库加载数据到列表，并且能够动态删除列表中的某一条记录。这里主要涉及的知识点包括Vue实例、数据绑定、事件处理以及数组方法。 1. **...
前端根据接口字段打电话
xiaoHelloWord的博客
12-23 186
传统是这种直接写上去 在vue中是电话是后端给的，我们需要换种写法要拼接一下 href也是学成 :href 冒号不要忘记了
前端数据字典使用
CenreyH的博客
01-28 1154
前端框架小知识
前端通过点击事件改变点击后标签状态
weixin_48398799的博客
05-27 1465
前端在做点击后改变标签状态的功能时可通过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.
前后端配置动态的数据字段标签（django_vue）
热门推荐
编程知识分享，主打前端
02-15 3万+
动态配置数据字典标签
前台实时获取数据库字典并展示
sunyuan005431的博客
07-23 470
前台实时获取数据库字典并展示
Web前端工作笔记001---封装前端数据字典_js 数组filter 总结_详解
添柴程序猿的专栏
09-23 2497
  JAVA技术交流QQ群：170933152  我这里是我封装,前端数据字典的时候,用到的 //数据字典 var dic = function () { var dics; $.ajax({ async: false, type: "get", url: constant.url.sc_admin.dic, da...
多语字段前端处理方案
FE 技术学习
08-17 382
网站多语，后台返回字段包含了规定的命名规范。可以用此方法覆盖原字段的值来赋值。 场景：    后台返回data为 data = { "status":1, "data":{ "labelGroups":[ { "labelGroupName":"领域", "labelGr.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值