当前位置：首页 > VUE

vue表格实现复选框

2026-01-07 06:08:20VUE

vue表格实现复选框

在Vue中实现表格复选框功能，可以通过以下方法完成：

方法一：使用el-table（Element UI）

安装Element UI后，在表格列中直接添加type="selection"的列即可实现复选框功能。

<template>
  <el-table
    :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>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td><input type="checkbox" v-model="selectedItems" :value="item"></td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三' },
        { name: '李四' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectedItems = this.selectAll ? [...this.tableData] : []
    }
  },
  watch: {
    selectedItems(newVal) {
      this.selectAll = newVal.length === this.tableData.length
    }
  }
}
</script>

方法三：使用vxe-table

如果需要更高级的表格功能，可以使用vxe-table库。

<template>
  <vxe-table
    :data="tableData"
    @checkbox-change="checkboxChangeEvent">
    <vxe-column type="checkbox" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
  </vxe-table>
</template>

<script>
import VXETable from 'vxe-table'
export default {
  data() {
    return {
      tableData: [
        { name: '张三' },
        { name: '李四' }
      ]
    }
  },
  methods: {
    checkboxChangeEvent({ records }) {
      console.log(records)
    }
  }
}
</script>

以上三种方法均可实现表格复选框功能，根据项目需求选择合适的实现方式。Element UI适合快速开发，自定义实现更灵活，vxe-table则提供了更丰富的表格功能。

vue表格实现复选框