Vue+elementUI实现动态展示列表的数据

目录
  • Vue elementUI动态展示列表的数据
    • 需求描述
  • Vue elementUI注意事项
    • 多选框对应List<object>
    • 输入框判断条件
    • 自定义弹窗格式

Vue elementUI动态展示列表的数据

需求描述

活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。

后台返回的数据结构如下

html

    <!-- 弹出的查看数据 -->
    <el-dialog
      width="1200px"
      :title="activityName"
      :visible.sync="viewDataPopUp"
    >
      <div class="export">
        <el-button type="primary" @click="exportData">导出数据</el-button>
      </div>

      <el-table border style="width: 100%" :data="resultTable" id="table">
        <!-- 循环问题与答案 -->
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          v-for="(item, key) in result"
          :key="key"
        >
        </el-table-column>
      </el-table>
    </el-dialog>

data定义需要用到的字段

      activitySettingPopUp: false, //活动设置弹窗
      activityData: [], //查看活动数据
      // answer: [],
      // tableAnswer: [],
      resultTable: [], //查看数据处理后的数据
      result: [], //查看数据用于循环的数据
      activityName: "", //查看数据的活动名称

调接口,成功后,将data.answers的值赋值给activityData.

        if (res.status_code === 200) {
            console.log(res);
            this.activityName = res.data.active_name;
            this.activityData = res.data.answers;

            this.result = this.getCol(this.activityData);
            this.resultTable = this.getTable(this.activityData);
          }

getCol方法获取需要循环的列label和值prop

    getCol(src) {
      let col = [];
      // for (let i = 0; i < src.length; i++) {
      for (let j in src[0]) {
        if (j === "answer") {
          let str = src[0][j];
          let str2obj = JSON.parse(str);
          for (let k in str2obj) {
            col.push({
              prop: k,
              label: str2obj[k]["title"],
            });
          }
        } else {
          col.push({
            prop: j,
            label: src[0][j].title,
          });
        }
      }
      // }
      return col;
    },
 

获取表格的数据

    getTable(src) {
      let table = [];
      for (let i = 0; i < src.length; i++) {
        let temp = {};
        for (let j in src[i]) {
          if (j == "answer") {
            let obj = JSON.parse(src[i][j]);
            for (let k in obj) {
              temp[k] = obj[k].value;
            }
          } else {
            temp[j] = src[i][j].value;
          }
        }
        table.push(temp);
      }
      return table;
    },

Vue elementUI注意事项

多选框对应List<object>

<el-select v-model="addOrEdit.obj" clearable multiple collapse-tags filterable value-key="id" style="width: 100%">
<el-option v-for="item in objList" :key="item.id" :label="item.name" :value="item"></el-option></el-select>

1.el-select标签

这个标签里对应的就是后台发过来的数据格式

如果后台发来的数据是List<String>,即["1", "2", "3"]这种格式,则这个标签里value-key="id"就可以不用加了,重点在于el-option标签的key与其对应就可以了

如果后台数据是List<object>,即[{"id": "1", "name": "一"}, {"id": "2", "name": "二"}, {"id": "3", "name": "三"}]这种格式,那么就要加上value-key="id",将list<object> 里的对象的key与el-option里的objList的key对应

2.el-option标签

  • key,就是用来用来作为标识对应的
  • label,就是用来前端展示内容的
  • value,是选完之后向后端传递数据的,如果填的是item.id那么传出的数据就只有id的数组,如果是item的话会将整个结构传出

输入框判断条件

1.格式判断

只能输入数字和两位小数

rules: {
        num: { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
      }

只能输入数字

可以直接在el-input 标签内加上 οnkeyup="value=value.replace(/[^\d]/g,'')" 即可

2.使用方法加入输入框格式判断数字和两位小数

入参key即为addOrEdit这个数组里面的字段名

在el-input 标签内加入:change="check_price('name')"即可

check_price(key) {
      var price = '' + this.addOrEdit[key];
      price = price
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace(/^\./g, '') //保证第一个为数字而不是.
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
      if (price.indexOf('.') < 0 && price != '') {
        // 以上已经过滤,此处控制的是如果没有小数点,首位不能为类似于 01、02的金额
        price = parseFloat(price);
      }
      this.$set(this.addOrEdit, key, price);
    },

3.提交判断

即使加上以上判断后输入框提示了,但是如果提交的处理没进行判断的话还是可以提交而导致后端出错。

所以当点击提交时,应将下面的addOrEdit替换为所需数组名称,如果通过再执行提交的逻辑

this.$refs['addOrEdit'].validate((valid) => {
    if (valid) {
        //执行逻辑
   }
}

自定义弹窗格式

1.const h = this.$createElement;

新建一个html内容的容器

2.this.$msgbox({}).then(() => {}).catch((err) => {});

用来新建一个弹窗

handleDelete(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: '删除',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'el-icon-circle-close',
        customClass: 'mes-width',
        message: h('div', { class: 'mr1' }, [h('p', { class: 'mes-d' }, '确定要删除此项吗?')])
      })
        .then(() => {
          deleteRule(row.id)
            .then((res) => {
              if (res.data.code === '1') {
                this.$message({
                  type: 'success',
                  message: '执行成功!'
                });
                this.getRuleList();
              }
            })
            .catch((err) => {
              this.$message({
                type: 'warning',
                message: err
              });
            });
        })
        .catch((err) => {});
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue Element UI自定义描述列表组件

    本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下 效果图 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行

  • Vue Element前端应用开发之表格列表展示

    1.列表查询界面效果 在介绍任何代码处理逻辑之前,我们先来做一个感官的认识,贴上一个效果图,在逐一介绍其中处理的步骤和注意事项. 常规的列表展示界面,一般分为几个区域,一个是查询区域,一个是列表展示区域,一个是底部的分页组件区域.查询区域主要针对常规条件进行布局,以及增加一些全局或者批量的操作,如导入.导出.添加.批量添加.批量删除等按钮:而其中主体的列表展示区域,是相对比较复杂一点的地方,需要对各项数据进行比较友好的展示,可以结合Tag,图标,按钮等界面元素来展示,其中列表一般后面会包括一些对

  • Vue组件库ElementUI实现表格列表分页效果

    ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 <el-pagination>加上@size-change="handleSizeChange.@current-change="handleCurrentChange"处理当前页和当前页数的改变事件 <!--

  • Vue Element前端应用开发之树列表组件

    1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观. 在Element里面也有一个el-tree的控件,如下所示,这里主要对它的各种属性和方法进行介绍. 简单的代码如下所示 <el-tree :data="data" @node-click="handleNodeClick"></el-tree> 主要在script部分里面指定它的d

  • Vue中使用elementui与Sortable.js实现列表拖动排序

    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script>     import Sortable from 'sortablejs'     export default{         .........         data() {             retur

  • Vue element商品列表的增删改功能实现

    目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good

  • 利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    目录 前言 实现过程 总结 前言 在前端项目开发中,经常会遇到省市县三级联动的下拉列表框组的问题,分享以下实现方法,以下内容为具体的实现过程: 实现过程 1.静态页面组件搭建:使用elementUI的form表单,并做一下基本的修改,得到以下结果: 2.然后是组件的数据配置: 表单的基本数据存放在form对象里面,至于省市县三个下拉菜单的数据,则以数组的形式存放,分别为provinceList[];cityList[];countyListp[]. 3.接下来处理重点数据:三级下拉菜单的联动:

  • Vue+elementUI实现动态展示列表的数据

    目录 Vue elementUI动态展示列表的数据 需求描述 Vue elementUI注意事项 多选框对应List<object> 输入框判断条件 自定义弹窗格式 Vue elementUI动态展示列表的数据 需求描述 活动查看的时候,根据后台返回的数据,动态渲染列和每行数据. 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName&quo

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • Django动态展示Pyecharts图表数据的几种方法

    目录 Django 模板渲染 1. 新建一个 Django 项目 2. 新建项目 urls 文件 3. 编写 Django 和 pyecharts 代码渲染图表 定时全量更新图表 定时增量更新图表 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令行中输入以下命令 django-admin startproject pyecharts_django

  • vue+elementUI实现动态面包屑

    本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码,供大家参考,具体内容如下 引言 后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样不方便维护,因此封装了面包屑组件,方便在页面使用 封装组件 <!-- Breadcrumb/index.vue -->     <template>   <div>     <el-breadcrumb class="breadcrumb" separator=&q

  • vue+elementui实现动态添加行/可编辑的table

    本文实例为大家分享了vue+elementui实现动态添加行.可编辑的table的具体代码,供大家参考,具体内容如下 HTMl代码块: <el-col :span="24">     <el-form-item label="与承租户同户籍成员:" :label-width="formLabelWidth">         <el-table :data="zichandetail.members&quo

  • vue element-ui实现动态面包屑导航

    vue element-ui动态面包屑导航,供大家参考,具体内容如下 直接上代码 一.template代码 // 这是单独的组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首页我是写死的,其他的遍历出来 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item

  • 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀... Flask 模板渲染 1. 新建一个项目 flask-echarts 在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板 将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.h

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

  • vue 根据选择的月份动态展示日期对应的星期几

    我等卑微的码农,依旧还得唱着"你我皆凡人,生在人世间,终日奔波苦,一刻不得闲,既然不是仙,难免有杂念,烦恼放两旁,工资摆中间,多少男子汉,秃顶又肥胖,加班的日夜,没有买保险". 虽一直反抗,却从未奏效.大老板们是梦想照进现实,我等是梦想撞见黑锅! 牢骚了那么多,锅还得背,班还得加,code还得继续码!!! 来,把标题中所提到的这个效果给实现一下吧. 原理其实很简单,先得有一个选择年月的输入框吧,这里我用的是Element的DatePicker日期选择器组件,具体使用方法不多说,自己去看

随机推荐