vue3+element-plus获取el-table的列的数据

您好，关于您的问题，可以通过以下步骤获取el-table的列数据：

1. 在el-table标签中添加ref属性，例如：ref="table"
2. 在Vue3中，可以通过refs来访问el-table，例如：const tableData = this.$refs.table.tableData;
3. tableData即为el-table的数据集合，您可以遍历该集合获取每一列的数据。

希望这个回答可以帮到您，如果您有其他问题，可以继续提问。谢谢！

相关问题

vue3+element-plus的el-table的表头加入红色的*星号

可以通过设置 el-table-column 的 prop 属性中的 label 字段来实现表头加入红色的*星号，具体代码如下：

<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot="header">
<span style="color: red">*</span>姓名
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在表头的 label 字段中加入红色的*星号，并使用 slot="header" 来自定义表头的内容，这样就可以实现表头加入红色的*星号的效果了。

vue3+element-plus+Sortable 实现列拖拽功能

实现列拖拽功能可以使用 SortableJS 库，并结合 Element Plus 的表格组件和 Vue3 的响应式数据。

首先需要在项目中安装 SortableJS：

npm install sortablejs --save

然后在需要使用的组件中引入 SortableJS 和 Element Plus 的表格组件：

import Sortable from 'sortablejs';
import { ElTable, ElTableColumn } from 'element-plus';

接着，在组件中定义表格数据和表格列，以及拖拽回调函数：

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, address: 'New York' },
        { name: 'Tom', age: 25, address: 'London' },
        { name: 'Lucy', age: 18, address: 'Paris' },
        { name: 'Lily', age: 22, address: 'Tokyo' }
      ],
      tableColumns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
        { label: 'Address', prop: 'address' }
      ]
    };
  },
  mounted() {
    // 绑定拖拽回调函数
    const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
    Sortable.create(el, {
      animation: 150,
      onEnd: evt => {
        const { newIndex, oldIndex } = evt;
        const item = this.tableColumns.splice(oldIndex - 1, 1)[0];
        this.tableColumns.splice(newIndex - 1, 0, item);
      }
    });
  },
  render() {
    return (
      <ElTable ref="table" data={this.tableData}>
        {this.tableColumns.map(column => (
          <ElTableColumn label={column.label} prop={column.prop}></ElTableColumn>
        ))}
      </ElTable>
    );
  }
};

这里使用 `Sortable.create` 方法创建一个拖拽对象，并且绑定了 `onEnd` 回调函数，当拖拽结束后，将表格列数组中的相应元素移动到新位置。

最后渲染表格时，使用 `map` 方法动态创建表格列。

这样就实现了列拖拽功能。