el-table-column多选

要在 Element UI 的 el-table 中使用多选功能，需要使用 el-table-column 组件，同时设置 type 为 selection。以下是示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市海淀区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    }
  }
}
</script>

在上述代码中，el-table-column 组件的 type 属性设置为 selection，表示这一列是多选框列。el-table-column 组件的 prop 属性表示数据源的字段名，label 属性表示列的标题。tableData 数据源中每一项都应包含 name、age 和 address 字段。

这样，el-table 的多选功能就实现了。在用户勾选多选框后，可以通过 $refs 属性获取选中的行数据。例如：

<template>
  <el-button type="primary" @click="handleSelection">获取选中项</el-button>
  <br>
  <br>
  <el-table :data="tableData" ref="table" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市海淀区' },
        { name: '李四', age: 30, address: '上海市浦东新区' },
        { name: '王五', age: 28, address: '广州市天河区' }
      ]
    }
  },
  methods: {
    handleSelection() {
      const selectedRows = this.$refs.table.selection
      console.log(selectedRows)
    }
  }
}
</script>

在上述代码中，el-button 组件的点击事件绑定了 handleSelection 方法，该方法通过 $refs.table.selection 获取选中的行数据，并将其打印到控制台中。