卡片

<template>
  <div class="container">
    <!-- 第一行 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card shadow="hover" class="card">
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in array1" 
              :key="index" 
              :type="getColor(item)"
              class="tag-item"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card shadow="hover" class="card">
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in array2" 
              :key="index" 
              :type="getColor(item)"
              class="tag-item"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card shadow="hover" class="card">
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in array3" 
              :key="index" 
              :type="getColor(item)"
              class="tag-item"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data {
    return {
      // 示例数据
      array1: ['苹果', '香蕉', '橙子', '苹果', '香蕉'],
      array2: ['苹果', '梨', '橙子', '香蕉'],
      array3: ['橙子', '苹果', '香蕉', '梨'],

      // 颜色映射表（相同元素使用相同颜色）
      colorMap: {
        '苹果': 'success',
        '香蕉': 'warning',
        '橙子': 'danger',
        '梨': 'info'
      }
    };
  },
  methods: {
    // 获取标签颜色
    getColor(item) {
      return this.colorMap[item] || '';
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.card {
  margin-bottom: 15px;
}
.tags-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tag-item {
  font-size: 14px;
}
</style>

<template>
  <div class="container">
    <!-- 遍历三组数组 -->
    <div v-for="(group, index) in groups" :key="index" class="group-row">
      <!-- 名称说明 -->
      <h3 class="group-title">第{{ index + 1 }}组</h3>
      <!-- 卡片布局 -->
      <el-row :gutter="10">
        <el-col v-for="(item, itemIndex) in group" :key="itemIndex" :span="4">
          <el-card class="item-card" shadow="hover">
            <!-- 动态绑定标签颜色 -->
            <el-tag :style="{ backgroundColor: getColor(item) }" class="item-tag">
              {{ item }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data {
    return {
      // 三组数组示例
      groups: [
        [1, 2, 3, 2, 1],
        ['A', 'B', 'A', 'C'],
        [true, false, true, true]
      ],
      // 颜色映射对象，保证相同元素颜色一致
      colorMap: {}
    }
  },
  methods: {
    // 获取元素对应的颜色
    getColor(value) {
      const strValue = String(value);
      // 如果颜色映射中不存在，则生成新颜色
      if (!this.colorMap[strValue]) {
        // 生成随机颜色
        const r = Math.floor(Math.random * 200) + 55;
        const g = Math.floor(Math.random * 200) + 55;
        const b = Math.floor(Math.random * 200) + 55;
        this.colorMap[strValue] = `rgb(${r}, ${g}, ${b})`;
      }
      return this.colorMap[strValue];
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.group-row {
  margin-bottom: 20px;
}
.group-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}
.item-card {
  text-align: center;
  padding: 10px;
}
.item-tag {
  padding: 8px 12px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
}
</style>

增加过滤

<template>
  <div class="container">
    <!-- 顶部过滤与排序 -->
    <div class="controls">
      <el-input v-model="searchQuery" placeholder="搜索元素" class="search-input" />
      <el-select v-model="sortOrder" class="sort-select">
        <el-option label="升序" value="asc" />
        <el-option label="降序" value="desc" />
      </el-select>
    </div>

    <!-- 三行卡片布局 -->
    <el-row :gutter="20">
      <!-- 第一行 -->
      <el-col :span="24">
        <el-card class="card-row" shadow="hover">
          <div class="row-header">第一组数据</div>
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in filteredAndSortedData(group1)" 
              :key="index" 
              :style="{ backgroundColor: colorMap[item] }"
              class="data-tag"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 第二行 -->
      <el-col :span="24">
        <el-card class="card-row" shadow="hover">
          <div class="row-header">第二组数据</div>
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in filteredAndSortedData(group2)" 
              :key="index" 
              :style="{ backgroundColor: colorMap[item] }"
              class="data-tag"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 第三行 -->
      <el-col :span="24">
        <el-card class="card-row" shadow="hover">
          <div class="row-header">第三组数据</div>
          <div class="tags-container">
            <el-tag 
              v-for="(item, index) in filteredAndSortedData(group3)" 
              :key="index" 
              :style="{ backgroundColor: colorMap[item] }"
              class="data-tag"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data {
    return {
      // 三组数组数据
      group1: [10, 20, 30, 20, 10],
      group2: [5, 15, 25, 15, 5],
      group3: [8, 18, 28, 18, 8],
      // 搜索关键词
      searchQuery: '',
      // 排序方式
      sortOrder: 'asc'
    };
  },
  computed: {
    // 颜色映射（相同元素使用相同颜色）
    colorMap {
      return {
        10: '#409EFF', 20: '#67C23A', 30: '#E6A23C',
        5: '#F56C6C', 15: '#909399', 25: '#303133',
        8: '#C0C4CC', 18: '#E4E7ED', 28: '#F2F6FC'
      };
    }
  },
  methods: {
    // 过滤和排序
    filteredAndSortedData(group) {
      let result = [...group];
      // 过滤
      if (this.searchQuery) {
        const query = Number(this.searchQuery);
        result = result.filter(item => item === query);
      }
      // 排序
      if (this.sortOrder === 'asc') {
        result.sort((a, b) => a - b);
      } else {
        result.sort((a, b) => b - a);
      }
      return result;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.card-row {
  margin-bottom: 20px;
}
.row-header {
  font-weight: bold;
  margin-bottom: 10px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.data-tag {
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>

第四

  <div class="container">
    <el-row :gutter="20">
      <!-- 第一行 -->
      <el-col :span="24">
        <h3>环境</h3>
        <el-card class="main-card">
          <template #header>
            <span>环境信息</span>
          </template>
          <div class="sub-cards">
            <el-card v-for="(item, index) in environmentData" :key="index" class="sub-card">
              <div>{{ item.name }}</div>
              <el-tag :type="getTagType(item.status)">{{ item.status }}</el-tag>
            </el-card>
          </div>
        </el-card>
      </el-col>

      <!-- 第二行 -->
      <el-col :span="24">
        <h3>服务</h3>
        <el-card class="main-card">
          <template #header>
            <span>服务信息</span>
          </template>
          <div class="sub-cards">
            <el-card v-for="(item, index) in serviceData" :key="index" class="sub-card">
              <div>{{ item.name }}</div>
              <el-tag :type="getTagType(item.status)">{{ item.status }}</el-tag>
            </el-card>
          </div>
        </el-card>
      </el-col>

      <!-- 第三行 -->
      <el-col :span="24">
        <h3>用户</h3>
        <el-card class="main-card">
          <template #header>
            <span>用户信息</span>
          </template>
          <div class="sub-cards">
            <el-card v-for="(item, index) in userData" :key="index" class="sub-card">
              <div>{{ item.name }}</div>
              <el-tag :type="getTagType(item.status)">{{ item.status }}</el-tag>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';

// 数据示例
const environmentData = ref([
  { name: '环境1', status: '正常' },
  { name: '环境2', status: '异常' }
]);

const serviceData = ref([
  { name: '服务1', status: '正常' },
  { name: '服务2', status: '维护中' }
]);

const userData = ref([
  { name: '用户1', status: '活跃' },
  { name: '用户2', status: '离线' }
]);

// 标签颜色映射
const getTagType = (status) => {
  const map = {
    '正常': 'success',
    '异常': 'danger',
    '维护中': 'warning',
    '活跃': 'primary',
    '离线': 'info'
  };
  return map[status] || 'default';
};

// 排序方法
const sortData = (data) => {
  return data.sort((a, b) => a.name.localeCompare(b.name));
};

// 过滤方法
const filterData = (data, keyword) => {
  return data.filter(item => item.name.includes(keyword));
};
</script>
<template>
  <!-- 搜索与排序 -->
  <div class="controls">
    <el-input v-model="searchKeyword" placeholder="输入关键字搜索" />
    <el-button @click="sortEnvironment">排序环境</el-button>
    <el-button @click="sortService">排序服务</el-button>
    <el-button @click="sortUser">排序用户</el-button>
  </div>
</template>

<script>
// 排序方法
const sortEnvironment =  => {
  environmentData.value = sortData(environmentData.value);
};

const sortService =  => {
  serviceData.value = sortData(serviceData.value);
};

const sortUser =  => {
  userData.value = sortData(userData.value);
};

// 过滤计算属性
const filteredEnvironment = computed( => {
  return filterData(environmentData.value, searchKeyword.value);
});
</script>
<style scoped>
.container {
  padding: 20px;
}
.main-card {
  margin-top: 10px;
}
.sub-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-card {
  width: 200px;
}
.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style>

第五

<template>
  <div class="container">
    <!-- 排序和过滤控件 -->
    <div class="controls">
      <el-select v-model="sortKey" placeholder="排序字段">
        <el-option label="环境" value="env"></el-option>
        <el-option label="服务" value="service"></el-option>
        <el-option label="用户" value="user"></el-option>
      </el-select>
      <el-input v-model="filterText" placeholder="过滤关键字" />
    </div>

    <!-- 三行卡片布局 -->
    <el-row :gutter="10">
      <el-col :span="24" v-for="(row, rowIndex) in filteredData" :key="rowIndex">
        <el-card class="env-card" :header="row.envName">
          <div v-for="(service, serviceIndex) in row.services" :key="serviceIndex">
            <el-card class="service-card" :header="service.serviceName">
              <div class="user-tags">
                <el-tag
                  v-for="(user, userIndex) in service.users"
                  :key="userIndex"
                  :type="getUserTagType(user)"
                >
                  {{ user }}
                </el-tag>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup {
    // 原始数据
    const data = [
      {
        envName: '开发环境',
        services: [
          { serviceName: '服务A', users: ['Alice', 'Bob'] },
          { serviceName: '服务B', users: ['Charlie'] }
        ]
      },
      {
        envName: '测试环境',
        services: [
          { serviceName: '服务C', users: ['Alice', 'David'] },
          { serviceName: '服务D', users: ['Eve'] }
        ]
      },
      {
        envName: '生产环境',
        services: [
          { serviceName: '服务E', users: ['Bob', 'Eve'] },
          { serviceName: '服务F', users: ['Frank'] }
        ]
      }
    ];

    // 用户标签颜色映射
    const userTagMap = {
      Alice: 'success',
      Bob: 'warning',
      Charlie: 'danger',
      David: 'info',
      Eve: 'primary',
      Frank: 'warning'
    };

    // 排序和过滤状态
    const sortKey = ref('');
    const filterText = ref('');

    // 获取用户标签类型
    const getUserTagType = (user) => {
      return userTagMap[user] || 'info';
    };

    // 排序和过滤后的数据
    const filteredData = computed( => {
      let result = [...data];

      // 过滤
      if (filterText.value) {
        result = result.filter(row =>
          row.envName.includes(filterText.value) ||
          row.services.some(service =>
            service.serviceName.includes(filterText.value) ||
            service.users.some(user => user.includes(filterText.value))
          )
        );
      }

      // 排序
      if (sortKey.value) {
        result.sort((a, b) => {
          if (sortKey.value === 'env') {
            return a.envName.localeCompare(b.envName);
          } else if (sortKey.value === 'service') {
            return a.services[0].serviceName.localeCompare(b.services[0].serviceName);
          } else if (sortKey.value === 'user') {
            return a.services[0].users[0].localeCompare(b.services[0].users[0]);
          }
          return 0;
        });
      }

      return result;
    });

    return {
      data,
      sortKey,
      filterText,
      filteredData,
      getUserTagType
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.env-card {
  margin-bottom: 10px;
}
.service-card {
  margin-bottom: 5px;
}
.user-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
</style>