el-table-column实现vue取一个map的指定key的value

可以通过 `formatter` 属性来实现该功能。假设你的 `el-table` 组件数据源中有一个字段是 `status`，需要根据状态码从一个 `map` 中获取对应的文字描述并展示在表格中，可以按照以下步骤进行操作：

1. 在 `data` 中定义 `map` 对象，例如：

data () {
  return {
    statusMap: {
      0: '未启用',
      1: '已启用',
      2: '已停用'
    }
  }
}

2. 在 `el-table-column` 中使用 `formatter` 属性来自定义展示内容：

<el-table-column prop="status" label="状态" :formatter="getStatus"></el-table-column>

3. 定义 `getStatus` 方法，该方法接收两个参数：`row` 和 `column`，其中 `row` 是当前行的数据对象，`column` 是当前列的配置对象。在该方法中，根据 `status` 字段从 `statusMap` 中获取对应的文字描述并返回即可：

methods: {
  getStatus (row, column) {
    return this.statusMap[row.status]
  }
}

这样，就可以实现根据状态码从 `map` 中获取对应的文字描述并展示在表格中的功能了。

相关问题

vue3 ts实现el-table实现行列互换位置，举个完整的例子

好的，下面是一个完整的例子，展示如何使用 Vue3 和 TypeScript 实现 el-table 的行列互换位置：

<template>
  <el-table :data="tableData" :row-style="{ display: 'flex', flexDirection: 'row' }">
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    >
      <template #default="{ row }">
        <div
          v-for="(item, i) in row"
          :key="i"
          :style="{ flex: '1 1 ' + (100 / row.length) + '%' }"
        >
          {{ item }}
        </div>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="swapRowsAndColumns">行列互换</el-button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { TableColumn } from 'element-plus/lib/el-table';

interface TableDataItem {
  name: string;
  age: number;
  address: string;
}

interface TableColumnItem extends TableColumn {
  prop: keyof TableDataItem;
}

export default defineComponent({
  name: 'TableDemo',
  setup() {
    const tableData = ref<TableDataItem[]>([
      { name: 'John', age: 18, address: 'New York' },
      { name: 'Mike', age: 22, address: 'Los Angeles' },
      { name: 'Amy', age: 25, address: 'Chicago' },
    ]);

    const tableColumns = ref<TableColumnItem[]>([
      { prop: 'name', label: '姓名', width: '100px' },
      { prop: 'age', label: '年龄', width: '100px' },
      { prop: 'address', label: '地址', width: '200px' },
    ]);

    const swapRowsAndColumns = () => {
      const newData: TableDataItem[] = [];

      for (let i = 0; i < tableData.value[0].length; i++) {
        const newRow: TableDataItem = {} as TableDataItem;

        for (let j = 0; j < tableData.value.length; j++) {
          newRow[tableColumns.value[j].prop] = tableData.value[j][i];
        }

        newData.push(newRow);
      }

      tableData.value = newData;
      tableColumns.value = tableColumns.value.map((column) => {
        return {
          prop: column.prop === 'name' ? 'index' : column.prop,
          label: column.prop === 'name' ? '#' : column.label,
          width: column.width,
        };
      });
    };

    return {
      tableData,
      tableColumns,
      swapRowsAndColumns,
    };
  },
});
</script>

在这个例子中，我们首先定义了 `TableDataItem` 和 `TableColumnItem` 接口，分别代表表格数据项和表格列项的类型。接着，我们使用 `defineComponent` 函数来定义一个组件，并且在 `setup` 函数中定义了表格数据和表格列的数据。

在模板中，我们使用了上面提到的方法来实现行列互换的效果，并且添加了一个按钮，用来触发行列互换的功能。

在 `swapRowsAndColumns` 函数中，我们首先创建一个 `newData` 数组，用来存储行列互换后的数据。然后使用两个循环来遍历表格数据和表格列，将每一列的数据按照行的方式存储到 `newData` 数组中。

接着，我们对表格列进行修改，将第一列的属性名由 `name` 改为 `index`，并将第一列的标签由 `姓名` 改为 `#`，从而让表格列的顺序和表格数据的顺序保持一致。

最后，将修改后的数据重新赋值给 `tableData` 和 `tableColumns`，界面上的表格就会自动更新，实现行列互换的效果。

vue3+el-table获取选中行的index

在Vue3和Element Plus（即Vue的UI库Element的升级版本）中获取`el-table`组件选中行的索引可以通过几种方式实现。以下是一个基本的示例，展示了如何在Vue3中使用Element Plus的表格组件来获取选中行的索引：

首先，你需要在组件中引入`el-table`和`el-table-column`组件，并且为表格设置一个`row-key`属性，这个属性通常是行数据的唯一标识，比如`id`字段。

然后，在表格中添加一个选择框，可以通过`type="selection"`来实现。同时，你需要为表格添加一个事件监听器，比如`@selection-change`，来监听选择框的变化。

在事件处理函数中，你可以通过事件对象`$event`来获取当前选中项的索引。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

const tableData = ref([
  // 表格数据
]);

const handleSelectionChange = (selection, rows) => {
  // `selection` 是当前选中的行数据数组
  // `rows` 是所有行数据数组
  if (rows.length) {
    const selectedIndexes = rows.map(row => tableData.value.indexOf(row));
    console.log(selectedIndexes); // 这里就是当前选中行的索引数组
  }
};
</script>

请注意，上面的代码是一个示例，其中`handleSelectionChange`函数将输出所有选中行的索引。