element vue は非表示の列を動的に表示します

Vue.js と Element UI を使用してページを構築する場合、多くの場合、データを表示するためにテーブルを使用する必要があります。ユーザーが必要な情報をニーズに応じてカスタマイズできるように、特定の列を動的に表示または非表示にする必要がある場合があります。 Element UI は、便利で使いやすく強力なテーブル コンポーネントを提供します。この記事では、Element UI テーブルの列を動的に表示または非表示にする方法に焦点を当てます。

1. 基本的な考え方
Element UI のテーブル コンポーネントは列オブジェクトを提供し、各列オブジェクトは列のプロパティを設定できます。したがって、列を動的に表示または非表示にしたい場合は、v-if コントロール属性を列オブジェクトに追加できます。

2. 分析例
ここでは、Element UI の el-table コンポーネントを例として、Vue.js を通じて列を動的に表示または非表示にする方法を示します。以下に示すような一連のデータがあるとします。 「エンコーディング」列と「ステータス」列は、動的に表示または非表示にする必要がある列です。

1. まず、次のコードをテーブル テンプレートに追加します。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. data オプションを script タグに追加し、showCode と 2 つのデータ属性を追加します。 showStatus.初期値はすべてtrueです。

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. 最後に、クリック イベントの showCode と showStatus の値を変更して、列を動的に表示または非表示にします。例:

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

「エンコーディングの表示/非表示」ボタンをクリックすると、以下に示すような効果が表示されます。 showCode の値が true の場合、「Encoding」列は表示され、showCode の値が false の場合、「Encoding」列は非表示になります。

4. 概要
この記事では、Element UI テーブル コンポーネントの列を動的に表示または非表示にする方法を紹介します。 v-if コントロール属性を列オブジェクトに追加し、関連する操作でその値を変更するだけで、この関数を簡単に実装できます。この方法により、ユーザーは必要に応じて必要な情報を自由に選択できるようになり、ページの柔軟性とカスタマイズ性が向上します。

以上がelement vue は非表示の列を動的に表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。