antd vue表格使用

1、表格整行添加點選事件

方法一：在data中設定對應得點選事件

<a-table
	:loading="loading"
	:columns="columns"
	:dataSource="tableData"
	:pagination="false"
	:rowSelection="rowSelection"
	:customRow="rowClick"
/>
<script>
	export default {
		data(){
			return {
				 rowClick: record => ({
                    on: { // 事件
                        click: () => {
                            // 點選改行時要做的事情
                            console.log('record', record)
                        },
                    }
                })
			}
		}
	}
</script>
           

方法二：在methods中設定

<script>
	export default {
		methods:{
			rowClick(record, index){
                return {
                    on: {
                        click: () => {
                            console.log(record,index)
                        }
                    }
                }
            }
		}
	}
</script>
           

2、設定點選該行選中多選框，已選則取消多選

<template>
	<a-table
		:loading="loading"
		:columns="columns"
		:dataSource="tableData"
		:pagination="false"
		:rowSelection="rowSelection"
		:rowClassName="setRowClassName"
		:customRow="rowClick"
		:rowKey="rowKey"
	/>
</template>

<script>
	export default {
		data(){
			return {
        		selectedRowKeys: [],
				options: {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                },
			}
		},
		 computed: {
            rowSelection() {
                return this.options
            }
        },
        methods:{
        	onSelectChange(selectedRowKeys, selectedRows) {
                this.options = {
                    selectedRowKeys: selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        }
	}
</script>
           

1.antd表格設定：https://blog.csdn.net/weixin_44051815/article/details/90049091

2.單選高亮設定：https://blog.csdn.net/zm_miner/article/details/83026968

3.多選框點選行設定：https://blog.csdn.net/qq_35331167/article/details/90174428

3、利用slot方法自定義單元格顯示内容

單個

<template>
  <a-table :columns="columns" :dataSource="data">
    <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
  </a-table>
</template>
<script>
const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
    { title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
  ];
</script>
           

多個

<template>
  <a-table :columns="columns" :dataSource="data">
    <template v-for="col in ['name','age','address']" :slot="col" slot-scope="text,record">
    	<div :key='col'></div>
    </template>
  </a-table>
</template>
<script>
const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' , scopedSlots: { customRender: 'name' } },
    { title: 'Age', dataIndex: 'age', key: 'age' , scopedSlots: { customRender: 'age' } },
    { title: 'Address', dataIndex: 'address', key: 'address', scopedSlots: { customRender: 'address' } },
  ];
</script>
           

4、使用render方法自定義單元格顯示内容

const columns = [
	               {
                    title: '操作',
                    dataIndex: 'operation',
                    fixed: 'right',
                    align: 'center',
                    customRender: (text, record) => {
                        const h = this.$createElement
                        let ele = [
                            h('a-menu-item', {key: 1,}, '重新配置設定賬号'),
                            h('a-menu-item', {key: 2}, '手動同步主資料'),
                            h('a-menu-item', {key: 3}, '重置密碼')
                        ]
                        return h('a-dropdown', {
                            props: {
                                placement: 'bottomCenter'
                            }
                        }, [
                            h('a-menu', {
                                slot: 'overlay',
                                on: {
                                    'click': (e) => {
                                        this.handleMenuClick(e.key, record)
                                    }
                                }
                            }, ele),
                            h('a-button', ['操作', h('a-icon', {props: {type: 'down'}})])
                        ])
                    }
                }
            ]