前端工作总结116-动态渲染数据 数据在数字字典里面

简介: 前端工作总结116-动态渲染数据 数据在数字字典里面
1接口调用
      /*调用接口*/
       created() {
         /*动态渲染content_type接口*/
         getAction("/dict/list",{
           dict_code:"content_type"
         }).then(res=>{
           this.content_type=res.data
         })
         /*动态渲染*/
         getAction("/dict/list",{
           dict_code:"resource_type"
         }).then(res=>{
           this.resource_type=res.data
         })
       },2存值
      data() {
         return {
           formLabelWidth: "140px",
           url: {
             add: "/account",
             edit: "/account",
             query: "/account"
           },
           value:'',
           business_module:[],
           column: [],
           /*存储content_type*/
           content_type:[],
           /*存储resoure_type*/
           resource_type:[]
         };
       },3ele处理数据
           <!--2content_type-->
           <el-form-item label="内容类型" :label-width="formLabelWidth">
             <el-select v-model="form.resource_type" placeholder="请选择发布类型">
               <el-option v-for="resource in resource_type" :label="resource.text" :value="resource.value"></el-option>
             </el-select>
           </el-form-item>
           <!--5price-->
           <el-form-item label="刊例价" :label-width="formLabelWidth">
             <el-input v-model="form.price" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="发布类型" :label-width="formLabelWidth">
             <el-select v-model="form.content_type" placeholder="请选择发布类型">
               <el-option v-for="content in content_type" :label="content.text" :value="content.value"></el-option>
             </el-select>
           </el-form-item>4运行结果
相关文章
|
13天前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
34 6
|
1月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
31 2
前端上传文件前校验文件数据
|
22天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
13天前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
110 1
|
21天前
|
JSON 前端开发 JavaScript
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
22 2
|
3天前
|
前端开发 JavaScript PHP
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
|
4天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
9 0
|
4天前
|
前端开发
后端一次返回大量数据,前端做分页处理
后端一次返回大量数据,前端做分页处理
6 0
|
4天前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
8 0
|
10天前
|
JavaScript 前端开发 网络架构
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上