eltable复选框打印

在Vue的el-table表格中，可以通过以下两种方式实现复选框的勾选打印：

1. el-table自带的复选框，使用handleSelectionChange方法获取勾选的数据[^1]。

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection" align="center"></el-table-column>
    ...
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}],
        selectedData: []
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.selectedData = val
        console.log(this.selectedData)
      }
    }
  }
</script>

2. 自定义复选框，使用getRowKeys和handleSelectionChange方法获取勾选的数据[^2]。

<template>
  <el-table :data="tableData" @select="select2" @select-all='selectAll'>
    <el-table-column type="selection" align="center" width="55">
      <template slot-scope="{row}">
        <el-checkbox v-model="selectedData" :label="row.id"></el-checkbox>
      </template>
    </el-table-column>
    ...
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}],
        selectedData: [],
        printStr: ''
      }
    },
    methods: {
      // 获取唯一值，一般都是id
      getRowKeys(row) {
        return row.id
      },
      // 全选
      selectAll(selection) {
        selection.forEach(item => {
          this.selectedData.push(item.id)
        })
        console.log(this.selectedData)
      },
      // 单选
      select2(selection, row) {
        this.selectedData.push(row.id)
        console.log(this.selectedData)
      }
    }
  }
</script>