el-table-column多选和选中对比

el-table-column 是 Element UI 中的表格列组件，而多选和选中是两个不同的属性。

多选是指在表格中可以同时选择多行数据，可以通过设置 el-table 的属性 `selectable` 为 true 来启用多选，同时需要设置 el-table-column 的属性 `type` 为 'selection'，这样就能实现多选的功能。

选中是指在表格中选中一行数据，通常用于展示详情或编辑数据。可以通过设置 el-table 的属性 `highlight-current-row` 为 true 来启用选中，同时需要设置 el-table-column 的属性 `type` 为 'index'，这样就能实现选中的功能。

需要注意的是，多选和选中可以同时存在于一个表格中，但是需要分别设置不同的 el-table-column。并且多选和选中的效果也是不同的，多选会在每一行数据前面显示一个复选框，选中则会在整行数据上加上一个高亮效果。

相关问题

el-table-column获得多选数据

在ECharts的表格组件`el-table-column`中，并没有直接提供获取多选数据的功能。`el-table-column`主要用于定义表格的列，包括表头的内容、显示的数据等。然而，如果你想在ElTable上实现多选功能，你可以配合ECharts的父组件`el-table`以及Vue的事件处理机制。

首先，你需要设置一个表单元素如`v-model`绑定一个多选数组，这将用于存储用户选择的行。然后，在`el-table-column`中，可以添加一个自定义渲染内容，比如包含一个复选框：

<template>
  <el-table-column label="操作" width="150">
    <template slot-scope="scope">
      <el-checkbox v-model="selectedRows.includes(scope.$index)" @change="handleSelectionChange"></el-checkbox>
    </template>
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: [], // 存储已选中的行索引
    };
  },
  methods: {
    handleSelectionChange(value) {
      if (value) {
        this.selectedRows.push(scope.$index);
      } else {
        const index = this.selectedRows.indexOf(scope.$index);
        if (~index) {
          this.selectedRows.splice(index, 1);
        }
      }
      // 这里可以根据需要触发其他操作，比如获取多选数据
      this.getMultiSelectData(this.selectedRows); // 获取多选数据函数
    },
    getMultiSelectData(selectedIndices) {
      // 在这里编写逻辑，根据selectedIndices获取多选行的数据
      // 示例：假设yourData是一个二维数组，每一项代表一行数据
      let multiSelectData = yourData.filter((item, index) => selectedIndices.includes(index));
      console.log('多选数据:', multiSelectData);
    },
  },
};
</script>

在这个例子中，当用户点击复选框时，`handleSelectionChange`方法会被调用，根据`selectedRows`更新状态并调用`getMultiSelectData`获取多选行的数据。

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 获取选中的行数据，并将其打印到控制台中。