vue实现隔行选中

隔行选中实现方法

在Vue中实现隔行选中效果，可以通过多种方式完成。以下是几种常见的实现方案：

使用v-for和索引判断

通过v-for循环渲染列表时，利用索引的奇偶性判断来实现隔行样式：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :class="{ 'selected-row': index % 2 === 0 }"
      @click="selectRow(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
      ],
      selectedIndex: null
    }
  },
  methods: {
    selectRow(index) {
      this.selectedIndex = index
    }
  }
}
</script>

<style>
.selected-row {
  background-color: #f0f0f0;
}
</style>

使用CSS伪类选择器

纯CSS方案，利用:nth-child伪类实现隔行样式：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="list-item"
      @click="selectRow(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<style>
.list-item:nth-child(even) {
  background-color: #f5f5f5;
}

.list-item:hover {
  background-color: #e0e0e0;
}
</style>

动态类名绑定

结合计算属性动态生成类名：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :class="rowClass(index)"
      @click="selectRow(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    rowClass() {
      return (index) => ({
        'row': true,
        'even-row': index % 2 === 0,
        'selected': index === this.selectedIndex
      })
    }
  }
}
</script>

<style>
.even-row {
  background-color: #f8f8f8;
}

.selected {
  background-color: #d4e6f1;
}
</style>

使用第三方库

对于复杂场景，可以考虑使用专门的UI库如Element UI或Vuetify：

<template>
  <el-table :data="items" @row-click="selectRow">
    <el-table-column prop="text" label="Item"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' }
      ]
    }
  },
  methods: {
    selectRow(row) {
      console.log('Selected row:', row)
    }
  }
}
</script>

响应式高亮

实现点击选中并高亮当前行的完整示例：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :class="['row', { 'selected': selectedRows.includes(index) }]"
      @click="toggleRow(index)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
      ],
      selectedRows: []
    }
  },
  methods: {
    toggleRow(index) {
      const idx = this.selectedRows.indexOf(index)
      if (idx > -1) {
        this.selectedRows.splice(idx, 1)
      } else {
        this.selectedRows.push(index)
      }
    }
  }
}
</script>

<style>
.row:nth-child(even) {
  background-color: #f9f9f9;
}

.selected {
  background-color: #4CAF50;
  color: white;
}
</style>

以上方案可以根据实际需求选择或组合使用。对于简单场景，CSS伪类方案最为简洁；需要交互控制时，建议使用动态类名绑定方案。