關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題詳解

更新時(shí)間：2023年02月08日 11:54:58 作者：錢多多810

最近element-ui遇到了很多坑,下面這篇文章主要給大家介紹了關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求描述：

展示信息時(shí)其中部門區(qū)域是未知數(shù)量的，需要通過遍歷進(jìn)行展示。如下圖舉例，其中地址和備注是一一對(duì)應(yīng)關(guān)系，需遵循該樣式。

問題描述：

起初我在el-descriptions中直接使用v-for進(jìn)行遍歷地址和備注兩個(gè)el-descriptions-item，發(fā)現(xiàn)頁面毫無反應(yīng)，不會(huì)渲染這部分。

<div v-for="item in arr" :key="item.id">
    <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-location-outline" />地址
        </template>
        {{item.city}}
    </el-descriptions-item>
    <el-descriptions-item>
        <template slot="label">
            <i class="el-icon-tickets" />備注
        </template>
        <el-tag size="small">{{item.remarks}}</el-tag>
    </el-descriptions-item>
</div>

導(dǎo)致原因：

打開控制臺(tái)發(fā)現(xiàn)，這個(gè)組件是將數(shù)據(jù)渲染成了一個(gè)表格形式，放在里面的div是沒有被識(shí)別出來。所以更不會(huì)遍歷渲染。

處理辦法：

使用template進(jìn)行包裹遍歷（注意：key要放在真實(shí)dom上）

   <template v-for="(item,ind) in arr">
      <el-descriptions-item :key="ind">
        <template slot="label">
          <i class="el-icon-location-outline" />地址
        </template>
        {{item.city}}
      </el-descriptions-item>
      <el-descriptions-item :key="ind">
        <template slot="label">
          <i class="el-icon-tickets" />備注
        </template>
        <el-tag size="small">{{item.remarks}}</el-tag>
      </el-descriptions-item>
    </template>

數(shù)據(jù)： arr: [{ city: '蘇州', remarks: '學(xué)校' }, { city: '揚(yáng)州', remarks: '老家' }]

以下為其他思考解決方式（不推薦）

1. 處理數(shù)據(jù)，不可以通過div遍歷但是可以在el-descriptions-item中遍歷自身。可以將傳過來的數(shù)組進(jìn)行拆分重新組裝，之后遍歷該數(shù)據(jù)。

例：[{city:'蘇州',remarks:'學(xué)校'}，{city:'揚(yáng)州',remarks:'老家'}] => ['蘇州','學(xué)校','揚(yáng)州','老家']

//遍歷展示
<el-descriptions-item v-for="(item,ind) in arr" :key="ind">
      <template slot="label">
        <i class="el-icon-location-outline" />
        {{ind%2==0?'地址':'備注'}}
      </template>
      {{item}}
</el-descriptions-item>

2. 拆分展示圖表。分成三部分，中間遍歷部分用div手寫樣式。（該樣式需要根據(jù)需求自行調(diào)整）

  <div class="departList">
        <div v-for="(item,ind) in jointDeparts" :key="ind" class="departItem">
          <div class="depart">
            <div class="left">地址</div>
            <div class="right">{{item.name}}</div>
          </div>
          <div class="type">
            <div class="left">備注</div>
            <div class="right">{{item.type}}</div>
          </div>
        </div>
  </div>

.departList {
  margin: 5px 0;
  width: 98% !important;
  margin-left: 2% !important;
  border: 1px solid #ebeef5;
 
  .departItem {
    display: flex;
    div {
      display: flex;
      width: 50%;
    }
    .left {
      padding: 12px 10px;
      color: rgba(0, 0, 0, 0.85);
      border-right: 1px solid #e5e6eb;
      border-bottom: 1px solid #e5e6eb;
      background: #f2f3f5;
      width: 30.3%;
      font-size: 14px;
    }
    .right {
      padding: 12px 10px;
      color: #606266;
      border-bottom: 1px solid #e5e6eb;
      font-size: 14px;
      width: 70%;
    }
 
    .type {
      .left {
        border-left: 1px solid #e5e6eb;
      }
    }
  }

總結(jié)

到此這篇關(guān)于關(guān)于vue2使用element UI中Descriptions組件的遍歷問題詳解的文章就介紹到這了,更多相關(guān)element UI中Descriptions組件遍歷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: