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

目录

Vue elementUI动态展示列表的数据

需求描述

Vue elementUI注意事项

多选框对应List
输入框判断条件

自定义弹窗格式

Vue elementUI动态展示列表的数据

需求描述

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

后台返回的数据结构如下

html
```
    
    
      
        导出数据
      
 
      
        
        
        
      
    
```
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
1.el-select标签

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

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