Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)

更新時(shí)間：2022年08月15日 09:51:29 作者：吳小花的博客

這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue elementUI動(dòng)態(tài)展示列表的數(shù)據(jù)

需求描述

活動(dòng)查看的時(shí)候，根據(jù)后臺(tái)返回的數(shù)據(jù)，動(dòng)態(tài)渲染列和每行數(shù)據(jù)。

后臺(tái)返回的數(shù)據(jù)結(jié)構(gòu)如下

html

    <!-- 彈出的查看數(shù)據(jù) -->
    <el-dialog
      width="1200px"
      :title="activityName"
      :visible.sync="viewDataPopUp"
    >
      <div class="export">
        <el-button type="primary" @click="exportData">導(dǎo)出數(shù)據(jù)</el-button>
      </div>
 
      <el-table border style="width: 100%" :data="resultTable" id="table">
        <!-- 循環(huán)問題與答案 -->
        <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, //活動(dòng)設(shè)置彈窗
      activityData: [], //查看活動(dòng)數(shù)據(jù)
      // answer: [],
      // tableAnswer: [],
      resultTable: [], //查看數(shù)據(jù)處理后的數(shù)據(jù)
      result: [], //查看數(shù)據(jù)用于循環(huán)的數(shù)據(jù)
      activityName: "", //查看數(shù)據(jù)的活動(dòng)名稱

調(diào)接口，成功后，將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方法獲取需要循環(huán)的列l(wèi)abel和值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;
    },

獲取表格的數(shù)據(jù)

    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注意事項(xiàng)

多選框?qū)?yīng)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標(biāo)簽

這個(gè)標(biāo)簽里對應(yīng)的就是后臺(tái)發(fā)過來的數(shù)據(jù)格式

如果后臺(tái)發(fā)來的數(shù)據(jù)是List<String>,即["1", "2", "3"]這種格式，則這個(gè)標(biāo)簽里value-key="id"就可以不用加了，重點(diǎn)在于el-option標(biāo)簽的key與其對應(yīng)就可以了

如果后臺(tái)數(shù)據(jù)是List<object>,即[{"id": "1", "name": "一"}, {"id": "2", "name": "二"}, {"id": "3", "name": "三"}]這種格式，那么就要加上value-key="id"，將list<object> 里的對象的key與el-option里的objList的key對應(yīng)

2.el-option標(biāo)簽

key，就是用來用來作為標(biāo)識對應(yīng)的
label，就是用來前端展示內(nèi)容的
value，是選完之后向后端傳遞數(shù)據(jù)的，如果填的是item.id那么傳出的數(shù)據(jù)就只有id的數(shù)組，如果是item的話會(huì)將整個(gè)結(jié)構(gòu)傳出

輸入框判斷條件

1.格式判斷

只能輸入數(shù)字和兩位小數(shù)

rules: {
        num: { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入正確額格式,可保留兩位小數(shù)' }
      }

只能輸入數(shù)字

可以直接在el-input 標(biāo)簽內(nèi)加上 οnkeyup="value=value.replace(/[^\d]/g,'')" 即可

2.使用方法加入輸入框格式判斷數(shù)字和兩位小數(shù)

入?yún)ey即為addOrEdit這個(gè)數(shù)組里面的字段名

在el-input 標(biāo)簽內(nèi)加入:change="check_price('name')"即可

check_price(key) {
      var price = '' + this.addOrEdit[key];
      price = price
        .replace(/[^\d.]/g, '') // 清除“數(shù)字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一個(gè). 清除多余的
        .replace(/^\./g, '') //保證第一個(gè)為數(shù)字而不是.
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能輸入兩個(gè)小數(shù)
      if (price.indexOf('.') < 0 && price != '') {
        // 以上已經(jīng)過濾，此處控制的是如果沒有小數(shù)點(diǎn)，首位不能為類似于 01、02的金額
        price = parseFloat(price);
      }
      this.$set(this.addOrEdit, key, price);
    },

3.提交判斷

即使加上以上判斷后輸入框提示了，但是如果提交的處理沒進(jìn)行判斷的話還是可以提交而導(dǎo)致后端出錯(cuò)。

所以當(dāng)點(diǎn)擊提交時(shí)，應(yīng)將下面的addOrEdit替換為所需數(shù)組名稱，如果通過再執(zhí)行提交的邏輯

this.$refs['addOrEdit'].validate((valid) => {
    if (valid) {
        //執(zhí)行邏輯
   }
}

自定義彈窗格式

1.const h = this.$createElement;

新建一個(gè)html內(nèi)容的容器

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

用來新建一個(gè)彈窗

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' }, '確定要?jiǎng)h除此項(xiàng)嗎？')])
      })
        .then(() => {
          deleteRule(row.id)
            .then((res) => {
              if (res.data.code === '1') {
                this.$message({
                  type: 'success',
                  message: '執(zhí)行成功!'
                });
                this.getRuleList();
              }
            })
            .catch((err) => {
              this.$message({
                type: 'warning',
                message: err
              });
            });
        })
        .catch((err) => {});
    },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: