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

    <!-- 弹出的查看数据 -->
    <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>

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

        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(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;
    },

<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>

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

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);
    },

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

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) => {});
    },