vxe复选框勾选事件 checkbox-change的使用

vxe复选框勾选事件 checkbox-change的使用

​ vxe是一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等…

1. vxe-table和vxe-grid

​ 在vxe-table中，列名使用标签定义，而在vxe-grid中，列名是通过:columns=“”，从data中返回而来。例如：

1.1 vxe-table的基本使用

  <vxe-table
      border
      ref="table"
      style="width: 500px"
      :data="tableData"
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
  >
    <vxe-column v-if="openCheckBox" type="checkbox" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
    <vxe-column field="address" title="Address" show-overflow></vxe-column>
  </vxe-table>

1.2 vxe-grid的基本使用

  <vxe-grid
      border
      ref="table"
      style="width: 500px"
      :data="tableData"
      :columns="tableColumn"
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
  >
  </vxe-grid>

  data() {
    return {
      tableColumn: [
        { type: 'checkbox', width: 50 , visible: false },
        { field: 'name', title: 'Name', width: 150, align: 'center' },
        { field: 'sex', title: 'Sex', align: 'center'},
        { field: 'age', title: 'Age', align: 'center' },
        { field: 'address', title: 'Address', align: 'center' },
      ],
    }
  },

2. 复选框可隐藏显示的用法

​ 在vex-table中，可以在绑定一个boolean型的变量用于控制复选框是否显示，但是只能用v-if进行绑定，而不能使用v-show。
​ 在vxe-grid中，可以使用visible字段用于控制复选框是否显示，要改变其值可以使用this.$set方法，例如：

// 显示选框
this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: true})
// 隐藏选框
this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: false})

​ 此外，在打开复选框之前应该要使用clearCheckboxRow()方法清除之前已选的复选框，否则，打开复选框后会带出上一次关闭复选框时的结果

3 .进行勾选事件

​ 无论是vxe-table还是vxe-grid，都可以通过checkbox-change(勾选部分)和checkbox-all(全选)触发勾选事件，且只对 type=checkbox 有效,，使用时要加上$refs属性。

3.1 checkbox-change事件的基本使用

    checkboxChange() {
      const checkedRows = this.$refs.table.getCheckboxRecords()
    },

3.1 checkbox-all事件的基本使用

    selectAllCheckboxChange(checked) {
      const checkedRows = checked.records
    },

​ 此方法可以实现全选和全不选的情况，且只有点击列名出的复选框才会触发

3.3 测试用例

4. 完整代码

4.1 vxe-table

<template>

  <button @click="openCheck">打开复选框</button>
  <button @click="closeCheck">关闭复选框</button>
  <vxe-table
      border
      ref="table"
      style="width: 500px"
      :data="tableData"
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
  >
    <vxe-column v-if="openCheckBox" type="checkbox" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
    <vxe-column field="address" title="Address" show-overflow></vxe-column>
  </vxe-table>
  </template>

<script>
export default {

  name: "VxeCheck",
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop',
        sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test',
        sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM',
        sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer',
        sex: 'Women', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop',
        sex: 'Women', age: 30, address: 'Shanghai' }
      ],
      openCheckBox: false,
      checkedRows: []
    }
  },
  methods: {
    openCheck() {
      this.$refs.table.clearCheckboxRow()//清除之前已选的复选框
      this.openCheckBox = true
    },
    closeCheck() {
      this.openCheckBox = false
    },
    checkboxChange() {
      this.checkedRows = this.$refs.table.getCheckboxRecords()
      console.log(this.checkedRows)
    },
    selectAllCheckboxChange(checked) {
      this.checkedRows = checked.records
      console.log(this.checkedRows)
    },
  }
}
</script>

<style scoped>

</style>

4.2 vxe-grid

<template>
  <button @click="openCheck">打开复选框</button>
  <button @click="closeCheck">关闭复选框</button>
  <vxe-grid
      border
      ref="table"
      style="width: 500px"
      :data="tableData"
      :columns="tableColumn"
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
  >
  </vxe-grid>
</template>

<script>
export default {

  name: "VxeCheck",
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
      ],
      tableColumn: [
        { type: 'checkbox', width: 50 , visible: false },
        { field: 'name', title: 'Name', width: 150, align: 'center' },
        { field: 'sex', title: 'Sex', align: 'center'},
        { field: 'age', title: 'Age', align: 'center' },
        { field: 'address', title: 'Address', align: 'center' },
      ],
      openCheckBox: false,
      checkedRows: []
    }
  },
  methods: {
    openCheck() {
      this.$refs.table.clearCheckboxRow()//清除之前已选的复选框
      this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: true})
    },
    closeCheck() {
      this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: false})
    },
    checkboxChange() {
      this.checkedRows = this.$refs.table.getCheckboxRecords()
      console.log(this.checkedRows)
    },
    selectAllCheckboxChange(checked) {
      this.checkedRows = checked.records
      console.log(this.checkedRows)
    },
  }
}
</script>

<style scoped>

</style>