<a-button type="primary" @click="onAdd">新增</a-button>
<a-table
:scroll="{ x:'100%',y: 'calc(100vh - 300px)' }"
:columns="columns"
:data-source="data"
:pagination="false"
bordered>
<template
v-for="col in ['name', 'age', 'address']"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>
{{ text }}
</template>
</div>
</template>
<template slot="operation" slot-scope="text, record, index">
<div class="editable-row-operations">
<span v-if="record.editable">
<a @click="() => save(record.key)">确定</a>
<a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
<a :disabled="editingKey !== ''" @click="delList(record.key)">删除</a>
</span>
</div>
</template>
</a-table>
<a-pagination
v-model="current"
show-size-changer
show-quick-jumper
:default-current="current"
:total="total"
@showSizeChange="onShowSizeChange"
:defaultPageSize="pageSize"
@change="onChange"
:hideOnSinglePage="true"
:show-total="total => `共计 ${total} 条`"
/>
antd vue表格自定义跳转筛选
最新推荐文章于 2023-01-18 15:17:55 发布