feat: 添加虚拟表格示例 (#1007)

* feat: 添加虚拟表格示例
This commit is contained in:
xiaoming
2024-03-20 15:00:47 +08:00
committed by GitHub
parent f0a80c680e
commit 2367eedc5d
78 changed files with 16678 additions and 14 deletions

View File

@@ -0,0 +1,50 @@
<script setup lang="ts">
import { useColumns } from "./columns";
const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
</script>
<template>
<div class="flex">
<el-scrollbar>
<code>
<pre class="w-[400px]"> {{ dataList }}</pre>
</code>
</el-scrollbar>
<pure-table
row-key="id"
align-whole="center"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
:data="dataList"
:columns="columns"
>
<template #operation="{ row, index }">
<el-button
v-if="!editMap[index]?.editable"
class="reset-margin"
link
type="primary"
@click="onEdit(row, index)"
>
修改
</el-button>
<div v-else>
<el-button
class="reset-margin"
link
type="primary"
@click="onSave(index)"
>
保存
</el-button>
<el-button class="reset-margin" link @click="onCancel(index)">
取消
</el-button>
</div>
</template>
</pure-table>
</div>
</template>