Ant Design Vue的a-table怎样在操作里面添加多余的操作按钮
文档是这样的<template><a-table :columns="columns" :data-source="data"></a-table></template><script>const columns = [{title: 'Name',dataIndex: 'name',key: 'name',scopedSlots: {
·
文档是这样的
<template>
<a-table :columns="columns" :data-source="data"></a-table>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address 1',
ellipsis: true,
},
{
title: 'Long Column Long Column Long Column',
dataIndex: 'address',
key: 'address 2',
ellipsis: true,
},
{
title: 'Long Column Long Column',
dataIndex: 'address',
key: 'address 3',
ellipsis: true,
},
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
ellipsis: true,
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default {
data() {
return {
data,
columns,
};
},
};
</script>
对于我用习惯element的我,看到这样的表格绅士一脸懵逼,添加操作按钮怎么添加,,,,
后来文档上有一个这样的例子
<template>
<a-table bordered :columns="columns" :components="components" :data-source="data">
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</template>
于是我就直接添加多个a标签,,但是问题又来了,怎样拿到当前数据呢
然后又是一波面向百度编程
<a-table :columns="columns" :data-source="data" :pagination="pagination">
<a slot="action" slot-scope="item" href="javascript:;">
<div @click="normaladd(item)">设为默认</div>
<div @click="eduit(item)">修改</div>
<div @click="delEvent(item)">删除</div>
</a>
</a-table>
于是就有了在 slot-scope="item"绑定item,,这样的话我传给方法的item就是当前行的数据了,这样就是能够操作了
说实话真实没有element的组件好用,不过antD也是过滤
更多推荐
已为社区贡献18条内容
所有评论(0)