elementui のテーブル コンポーネントは v-if を多量に使用してリストのレンダリングの乱れを引き起こし、一部の列のレンダリング値が間違っており、一部の列のレンダリングが null 値であるという問題を解決しました。

メモを取ってください:

同僚がこれに遭遇し、非常に奇妙に感じたので勉強しました。

最初に言っておきますが、私の同僚がこの問題に遭遇したのに、私がこの問題に遭遇できなかった理由は、私がel-table-columnここでそれを行っていたとき、最初に定義されてtableHeader: [...]からそれをv-for横断していたからです。v-for縛られて:key=""、彼はここに並べられています

コード例 (実際のコードではありません):

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

解決

v-ifこれはタイル状に表示されています。ここから、どこにでもと があることがわかりますv-else。実際、この問題は非常に簡単に解決できます。keyタイル状にキーワードを追加するだけです。of需要判断をel-table-column追加するだけで、配列するkeyことも、直接配列することもできます:key="Math.random()"

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
  	:key="Math.random()"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
  	:key="Math.random()"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
  	:key="Math.random()"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

tableこの種の問題が発生しない場合は、以下に私の側でのレンダリング方法を示します。