快捷導(dǎo)航

Vue2?Element?description組件列合并詳解

更新時(shí)間：2023年01月16日 12:38:34 作者：白瑕

在使用Vue的時(shí)候經(jīng)常會(huì)涉及到表格的列合并,下面這篇文章主要給大家介紹了給大家Vue2?Element?description組件列合并的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

需求是description需要做成首行3列, 剩余行為4列, 額, 我說(shuō)的是算上標(biāo)簽, 就像這樣:

你可能會(huì)說(shuō)"啊, 你這個(gè)笨蛋為什么不去用labelStyle或者contentStyle來(lái)消減表格呢?"

我肯定是試過(guò)的啦…不行嘛.

一、首次嘗試

1.style的失敗嘗試

我十分想用規(guī)規(guī)矩矩的方法去解決問(wèn)題, 我選用了labelStyle和contentStyle, 并且認(rèn)為"只要將右上角el-descriptions-item的label設(shè)置為沒(méi)有寬度或者display:none;就好了, 然后另一個(gè)格子就會(huì)壓過(guò)去."

這個(gè)想法多少是有點(diǎn)天真.

當(dāng)我把labelStyle設(shè)置為display:none時(shí)整個(gè)content格子直接向左塌陷到了label的原位置并且它自身的寬度把整個(gè)一列的label全都撐的脹起來(lái):

不要用width…我試過(guò)了, 會(huì)有一些比較恐怖的效果.

不過(guò)我確實(shí)沒(méi)有試過(guò)用::v-deep操作element內(nèi)部屬性然后設(shè)置樣式來(lái)消減寬度.

2.DOM結(jié)構(gòu)

組長(zhǎng)過(guò)來(lái)看了一會(huì)說(shuō)他以前做過(guò)這種description結(jié)構(gòu), 他大體說(shuō)了一下, 老實(shí)說(shuō)我沒(méi)太聽(tīng)明白, 我只是感覺(jué)DOM上可以做一點(diǎn)文章, 要不試一下?

我的思路是將上下, 也就是第一行的"畸形行"和下面的正常行分離處理, 兩者互不干擾, 那么需要兩個(gè)el-descriptions來(lái)生成:
先用一個(gè)大el-descriptions作為容器, 其中的兩個(gè)el-descriptions-item分別作為上下兩個(gè)分區(qū), 各傳入一個(gè)el-descriptions分別生成, 這樣上方的畸形行不會(huì)對(duì)下方解釋表產(chǎn)生格式影響.

<el-descriptions
  :column="2"
  border
  labelstyle="text-align: center; width: 120px;"
  contentStyle="text-align:center;"
>
  <el-descriptions-item labelClassName="labelClass">
    <el-descriptions
      :column="3"
      border
      labelstyle="text-align: center; width: 120px;"
      contentStyle="text-align:center;"
    >
      <el-descriptions-item contentStyle="display:none;">
        <template slot="label">
          label1
        </template>
      </el-descriptions-item>
      <el-descriptions-item labelStyle="display:none;">
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
      <el-descriptions-item labelStyle="display:none;">
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-descriptions-item>

  <el-descriptions-item>
    <el-descriptions>
      <el-descriptions-item
        v-for="(item, index) in tableHead"
        :key="index"
        labelclassName="labelClass"
      >
        <template slot="label">
          {{ "label" + index }}
        </template>
        <el-input
          readonly
          :value="item.value"
          style="width: 100%; text-align: center"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-descriptions-item>
</el-descriptions>

表格局部空缺的問(wèn)題解決了, 然而仍舊不能完全令人滿(mǎn)意, 雖然可以通過(guò)寬度調(diào)節(jié)達(dá)到效果, 但是label難以居中, 并且, 沒(méi)有了el-description本身的table規(guī)格, 這個(gè)表格的對(duì)齊方式并不穩(wěn)定, 最上層很容易和下層錯(cuò)位:

二、解決方案

完美實(shí)現(xiàn), 對(duì)齊, 無(wú)錯(cuò)位, 不干擾.

依賴(lài)span實(shí)現(xiàn), labelClassName只是顏色.

總體思路還是單獨(dú)處理el-description-item, 但使用了官方提供的屬性, 也是更加規(guī)范的方法.

column屬性規(guī)定的是一行幾個(gè)item, 注意一個(gè)完整的item在不加style的情況下是由label和content組成的一對(duì)橫向格子.
span規(guī)定描述列表的列數(shù), 一列是由一個(gè)完整的item起頭, 注意一個(gè)完整的item在不加style的情況下是由label和content組成的一對(duì)橫向格子.

<el-descriptions
  :column="2"
  border
  labelstyle="text-align: center; width: 120px;"
  contentStyle="text-align:center;"
>

  <el-descriptions-item 
    :span="2"   
    labelClassName="labelClass"
  >
    <template slot="label">
      label 
    </template>
    <el-input 
      readonly 
      :value="tableData.is"
    />
    <el-input 
      readonly 
      :value="tableData.vn"
    />
  </el-descriptions-item>
  
  <el-descriptions-item
    v-for="(item, index) in tableHead"
    :key="index"
    labelclassName="labelClass"
  >
    <template slot="label">
      label
    </template>
    <el-input
      readonly
      :value="tableData[item.value]"
      style="width: 100%; text-align: center"
    />
  </el-descriptions-item>
  
</el-descriptions>

總結(jié)

到此這篇關(guān)于Vue2 Element description組件列合并的文章就介紹到這了,更多相關(guān)Vue2 Element description列合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！