Preface

Requirements are description s that need to be made into the first three columns and the remaining four columns of behavior. Well, what I'm saying is labeling, like this:

You might say, "Well, why don't you use labelStyle or contentStyle to subtract tables, you fool?"
I must have tried it. No way.

First attempt

1.style's failed attempts

I wanted to solve the problem in a regular way. I chose labelStyle and contentStyle and thought "Just set the label of the el-descriptions-item in the upper right corner to no width or display:none; that's it, and another grid will crush over."
This idea is somewhat naive.
When I set labelStyle to display:none, the entire content grid collapses directly to the left into the label's original position and its own width expands the entire column of labels:

However, I did not try this: v-deep manipulates the element ary internal properties and then sets the style to reduce the width.

2.DOM structure

The group leader came over and said that he had done this description structure before. He said it in general. To be honest, I don't quite understand it. I just feel that I can do some articles on the DOM. Would you like to try it?

My idea is to separate the upper and lower lines, that is, the first line of "abnormal rows" and the lower normal rows, which do not interfere with each other, so two el-descriptions are needed to generate:
First, use a large el-descriptions as a container, with two el-descriptions-item s as the upper and lower partitions and one el-descriptions as the incoming partition, so that the malformed columns above will not have formatting effects on the interpretation table below.

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

The problem of table partial vacancy has been solved, but it is still not completely satisfactory. Although the effect can be achieved by width adjustment, label is difficult to center, and without the table specification of el-description itself, the alignment of this table is not stable, and the top and bottom layers are easily misplaced:

2. Solutions

Perfect implementation, alignment, no dislocation, no interference.
Depending on the space implementation, labelClassName is just a color.

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

summary

Today the code review has not completed, the two tasks in hand have not been completed, today they are still improving, alas.
I hope this article will help you.