1. 配列操作とフィルタリング

以下はデータのソート・グルーピング処理の例です。

// データ処理関数
processTableData(data) {
  // 1. ソート処理
  data = data.sort(this.sortData("version", "Desc"));
  
  // 2. グループ化処理
  const grouped = this.groupData(data, item => [item.fileName]);
  
  const result = [];
  grouped.forEach(group => {
    result.push(group[0]); // 各グループの最初の要素を取得
  });
  
  this.mainTableList = result;
  this.mainTotal = result.length;
  console.log(grouped.length);
},

// ソート関数
sortData(property, type) {
  return (a, b) => {
    const valA = a[property];
    const valB = b[property];
    
    switch(type) {
      case "Desc":
        return valB - valA;
      case "Asc":
        return valA - valB;
      default:
        return valA - valB;
    }
  };
},

// グループ化関数
groupData(array, keyFn) {
  const groups = {};
  array.forEach(item => {
    const key = JSON.stringify(keyFn(item));
    groups[key] = groups[key] || [];
    groups[key].push(item);
  });
  return Object.values(groups);
}

2. Element-UI Selectコンポーネントの使用

初期値設定の際には、v-modelに配列を指定する必要があります。

3. Checkboxコンポーネントの初期化

<el-checkbox-group v-model="selectedItems">
  <el-checkbox label="A" />
  <el-checkbox label="B" />
  <el-checkbox label="C" />
</el-checkbox-group>

初期データ設定：

data() {
  return {
    selectedItems: [], // 配列形式で初期化
    defaultValues: ['B'] // デフォルト値
  }
},
mounted() {
  this.selectedItems = [...this.defaultValues];
}

4. ループ処理の中断方法

try {
  for(const item of dataList) {
    if(item.type === 'error') {
      throw new Error('処理停止');
    }
  }
} catch(e) {
  console.error(e.message);
}

5. Checkboxの無効化処理

プロパティに:disabled属性を追加します。

6. Selectコンポーネントの値取得

<el-select v-model="selected" @change="handleSelect">
  <el-option 
    v-for="item in options" 
    :key="item.value" 
    :label="item.label" 
    :value="item.value" 
  />
</el-select>

7. 配列フィルタリング処理

<div id="app">
  <ul>
    <li v-for="num in filteredNumbers">{{ num }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    numbers: [1,2,3,4,5]
  },
  computed: {
    filteredNumbers() {
      return this.numbers.filter(n => n < 4);
    }
  }
})

8. ElTagクリックイベントの有効化

イベントハンドラに.native修飾子を追加します。

9. 配列の重複除去

// オブジェクト配列の重複除去
unique(arr) {
  const seen = new Map();
  return arr.filter(item => {
    if(!seen.has(item.id)) {
      seen.set(item.id, true);
      return true;
    }
    return false;
  });
}

10. 表形式の並列表示

el-formにinline属性を指定します。

11. 自定义入力コンポーネント

<el-autocomplete
  v-model="searchTerm"
  :fetch-suggestions="searchSuggestions"
  placeholder="検索"
>
  <template slot-scope="{ item }">
    <div>{{ item.name }}</div>
  </template>
</el-autocomplete>

12. 画像アップロード処理

<el-upload
  :on-remove="handleRemove"
  list-type="picture-card"
>
  <i slot="default">＋</i>
</el-upload>

handleRemove(file) {
  const index = this.uploadFiles.findIndex(f => f.url === file.url);
  this.uploadFiles.splice(index, 1);
}

13. ポップコンファームのイベント処理

<el-popconfirm
  title="変更を確定しますか？"
  @confirm="saveChanges"
>
  <el-link slot="reference">保存</el-link>
</el-popconfirm>

14. テーブルの辞書マッピング

データ変換処理を別関数として定義します。

15. 画像表示処理

画像URLをimgタグで直接表示します。

16. コンポーネント間データ共有

イベントミキサーを使用してデータを渡します。

17. JSONの深拷贝処理

const cloneData = JSON.parse(JSON.stringify(originalData));