el-table-column实现vue取一个map的指定key的value
时间: 2023-11-27 15:51:17 浏览: 44
可以通过 `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 的行列互换位置:
```html
<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`,界面上的表格就会自动更新,实现行列互换的效果。
vue el-table通过弹窗显示隐藏表格中的列,弹窗有el-checkbox全选el-checkbox-group显示表格所有的列,刚进页面时表格显示部分的列,弹窗中勾选全选时表格则显示所有的列,表格未显示所有的列,如何下载完成的表格数据
对于未显示的列,可以通过设置 `<el-table-column :visible="false">` 的方式来隐藏列,然后在弹窗中通过 `<el-checkbox>` 和 `<el-checkbox-group>` 组件来控制列的显示和隐藏。当用户勾选全选时,可以通过遍历表格的所有列来显示所有列,代码如下:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" :visible="column.visible"></el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-checkbox @change="handleCheckAll">全选</el-checkbox>
<el-checkbox-group v-model="checkedColumns">
<el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
</el-checkbox-group>
</el-dialog>
<el-button @click="downloadTableData">下载表格数据</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
columns: [ // 表格列配置
{ label: '姓名', prop: 'name', visible: true },
{ label: '年龄', prop: 'age', visible: true },
{ label: '地址', prop: 'address', visible: false },
{ label: '邮箱', prop: 'email', visible: false }
],
dialogVisible: false, // 弹窗是否可见
checkedColumns: [] // 已勾选的列
}
},
methods: {
handleCheckAll(value) {
if (value) {
// 显示所有列
this.columns.forEach(column => {
column.visible = true
})
} else {
// 隐藏所有列
this.columns.forEach(column => {
column.visible = false
})
}
},
downloadTableData() {
// 下载表格数据的代码
}
}
}
</script>
```
至于如何下载表格数据,可以借助第三方库 `file-saver` 和 `xlsx` 来实现,具体实现可以参考以下代码:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop" :visible="column.visible"></el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-checkbox @change="handleCheckAll">全选</el-checkbox>
<el-checkbox-group v-model="checkedColumns">
<el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
</el-checkbox-group>
</el-dialog>
<el-button @click="downloadTableData">下载表格数据</el-button>
</div>
</template>
<script>
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
export default {
data() {
return {
tableData: [], // 表格数据
columns: [ // 表格列配置
{ label: '姓名', prop: 'name', visible: true },
{ label: '年龄', prop: 'age', visible: true },
{ label: '地址', prop: 'address', visible: false },
{ label: '邮箱', prop: 'email', visible: false }
],
dialogVisible: false, // 弹窗是否可见
checkedColumns: [] // 已勾选的列
}
},
methods: {
handleCheckAll(value) {
if (value) {
// 显示所有列
this.columns.forEach(column => {
column.visible = true
})
} else {
// 隐藏所有列
this.columns.forEach(column => {
column.visible = false
})
}
},
downloadTableData() {
// 表格数据
const data = [this.columns.map(column => column.label), ...this.tableData.map(item => this.columns.map(column => item[column.prop]))]
// 已勾选的列
const checkedColumns = this.checkedColumns.length > 0 ? this.checkedColumns : this.columns.filter(column => column.visible).map(column => column.prop)
// 生成 workbook
const workbook = XLSX.utils.book_new()
const worksheet = XLSX.utils.aoa_to_sheet(data.filter((_, index) => index === 0 || checkedColumns.includes(this.columns[index - 1].prop)))
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
// 导出文件
const buffer = XLSX.write(workbook, { type: 'buffer' })
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'table-data.xlsx')
}
}
}
</script>
```