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

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

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

前言

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

你可能會說"啊, 你這個笨蛋為什么不去用labelStyle或者contentStyle來消減表格呢?"

我肯定是試過的啦…不行嘛.

一、首次嘗試

1.style的失敗嘗試

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

這個想法多少是有點天真.

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

不要用width…我試過了, 會有一些比較恐怖的效果.

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

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

組長過來看了一會說他以前做過這種description結(jié)構(gòu), 他大體說了一下, 老實說我沒太聽明白, 我只是感覺DOM上可以做一點文章, 要不試一下?

我的思路是將上下, 也就是第一行的"畸形行"和下面的正常行分離處理, 兩者互不干擾, 那么需要兩個el-descriptions來生成:
先用一個大el-descriptions作為容器, 其中的兩個el-descriptions-item分別作為上下兩個分區(qū), 各傳入一個el-descriptions分別生成, 這樣上方的畸形行不會對下方解釋表產(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>

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

二、解決方案

完美實現(xiàn), 對齊, 無錯位, 不干擾.

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

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

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

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