vue表格实现复选框

实现 Vue 表格复选框的基础方法

在 Vue 中实现表格复选框通常需要结合 v-model 和数组管理选中状态。以下是一个基础实现示例：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectedItems = this.selectAll ? this.tableData.map(item => item.id) : []
    }
  }
}
</script>

使用 Element UI 的表格复选框

如果使用 Element UI 组件库，可以更简单地实现：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>

实现分页表格的复选框记忆功能

对于分页表格，需要额外处理跨页选中的状态记忆：

<template>
  <el-table
    :data="currentPageData"
    @selection-change="handleSelectionChange"
    row-key="id"
    ref="multipleTable">
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      currentPageData: [], // 当前页数据
      selectedItems: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.loadPageData()
      this.$nextTick(() => {
        this.currentPageData.forEach(row => {
          if (this.selectedItems.some(item => item.id === row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.selectedItems = val
    },
    loadPageData() {
      // 加载当前页数据逻辑
    }
  }
}
</script>

自定义复选框样式和逻辑

可以通过作用域插槽自定义复选框的样式和行为：

<template>
  <el-table :data="tableData">
    <el-table-column label="选择" width="80">
      <template #default="{row}">
        <el-checkbox 
          v-model="row.selected" 
          @change="handleCheckboxChange(row)">
        </el-checkbox>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    }
  },
  methods: {
    handleCheckboxChange(row) {
      console.log(`Item ${row.id} selected: ${row.selected}`)
    }
  }
}
</script>

性能优化建议

对于大型数据集，考虑使用虚拟滚动表格组件如 vue-virtual-scroller 配合复选框实现：

<template>
  <RecycleScroller
    class="scroller"
    :items="tableData"
    :item-size="50"
    key-field="id">
    <template #default="{item}">
      <div class="row">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        <span>{{ item.name }}</span>
      </div>
    </template>
  </RecycleScroller>
</template>

以上方法覆盖了从基础实现到高级功能的 Vue 表格复选框实现方案，可根据具体需求选择适合的方式。