前言:
项目需要,使用antd的框架,之后会发更多资料,这里是antd的表格中需要序号,可是他自身又没有直接的,所以需要我们给他加一下
实现效果:
实现步骤:
第一:下载安装antd,这里就不详细说了,入口:(暂无)
第二:使用它的table功能
下面贴一下完整组件代码:antd_table.vue
<template>
<div>
<a-table :rowSelection="rowSelection" :dataSource="dataSource" :columns="columns" :pagination='pagination' @change='tableChange'>
<div slot="operation" slot-scope="operation">
<a href="javascript:;">修改</a><span> | </span>
<a href="javascript:;">查看</a><span> | </span>
<a href="javascript:;">删除</a>
</div>
</a-table>
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
/**
* 分页器属性
*/
pagination:{
current:1,//当前页数 v-model
defaultCurrent:1,//默认的当前页数
defaultPageSize:3,//每页显示几条数据
showQuickJumper:false,//是否显示直通车
total:5,//总数
},
/**
* table数据
*/
dataSource: [
{
key: '0',
name: '设备1',
age: '32',
address: 'London, Park Lane no. 0',
},
{
key: '1',
name: '设备2',
age: '32',
address: 'London, Park Lane no. 1',
},
{
key: '3',
name: '设备3',
age: '32',
address: 'London, Park Lane no. 1',
},
{
key: '4',
name: '设备4',
age: '32',
address: 'London, Park Lane no. 1',
},
{
key: '5',
name: '设备5',
age: '32',
address: 'London, Park Lane no. 1',
},
],
/**
* 列值
*/
columns: [
{
title:'序号',
width:80,
customRender:(text,record,index)=>`${(this.pagination.current-1)*this.pagination.defaultPageSize + (index+1)}`
// render ==> customRender
},
{
title: '设备名称',
dataIndex: 'name',
},
{
title: '操作',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
},
],
};
},
components: {},
computed: {
/**
* 全选
*/
rowSelection() {
const { selectedRowKeys } = this;
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
},
},
created() {},
mounted() {},
methods: {
/**
* 分页、排序、筛选变化时触发
*/
tableChange(pagination, filters, sorter){
this.pagination = pagination;
}
},
watch: {}
}
</script>
<style lang='less' scoped>
</style>