vue实现表格选择

Vue 实现表格选择功能

在 Vue 中实现表格选择功能通常需要结合组件库或自定义逻辑。以下是几种常见实现方式：

使用 Element UI 的表格选择功能

Element UI 提供了内置的表格选择功能，只需简单配置即可实现：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{name: '张三'}, {name: '李四'}],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>

自定义实现表格选择

如果需要更灵活的控制，可以自定义选择逻辑：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>
        <input 
          type="checkbox" 
          v-model="item.selected"
          @change="updateSelection">
      </td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {name: '张三', selected: false},
        {name: '李四', selected: false}
      ]
    }
  },
  methods: {
    updateSelection() {
      const selectedItems = this.tableData.filter(item => item.selected)
      console.log(selectedItems)
    }
  }
}
</script>

实现全选功能

添加全选功能可以提升用户体验：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
    <table>
      <!-- 表格内容同上 -->
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    selectAll: {
      get() {
        return this.tableData.every(item => item.selected)
      },
      set(value) {
        this.tableData.forEach(item => {
          item.selected = value
        })
      }
    }
  },
  methods: {
    toggleSelectAll() {
      this.tableData.forEach(item => {
        item.selected = this.selectAll
      })
    }
  }
}
</script>

使用 Vuex 管理选择状态

在大型应用中，可以使用 Vuex 集中管理选择状态：

// store.js
export default new Vuex.Store({
  state: {
    tableData: [],
    selectedItems: []
  },
  mutations: {
    updateSelection(state, payload) {
      state.selectedItems = payload
    }
  }
})

<!-- 组件中 -->
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['selectedItems'])
  },
  methods: {
    ...mapMutations(['updateSelection']),
    handleSelectionChange(items) {
      this.updateSelection(items)
    }
  }
}
</script>

响应式选择功能优化

为提升性能，可以使用计算属性和 watch 来优化选择逻辑：

export default {
  data() {
    return {
      tableData: [] // 初始数据
    }
  },
  computed: {
    selectedCount() {
      return this.tableData.filter(item => item.selected).length
    }
  },
  watch: {
    selectedCount(newVal) {
      console.log(`当前选中了${newVal}项`)
    }
  }
}

以上方法可以根据具体需求选择或组合使用，Element UI 方案适合快速开发，自定义方案则提供更大灵活性。