Vue+elementUI實現動態展示列表的數據

Posted on by

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：