vue3 + jsx + antd antd组件的table组件使用必备知识点

//vue3+jsx+antd

// antd组件中  table组件的使用细节
const model = defineComponent({
    name: 'model',
    setup() {
        let pageObj = reactive({
            pageCur: 1, // 当前的页数
            pageSize: 10, // 一页显示的条数
            total: 0 //总共的条数
        })
        // 表格的第一行  一般做为标题内容
        let tableTitle = [
            {
                title: '标题1', // 标题1
                dataIndex: 'title1',// 标题那一列的绑定
                width: '40%', // 设置 这一标题（列）单元格的宽度
                align: 'center',//设置（该列）内容水平居中
                className: 'table-center'// 设置（该列）的类名
                // .table-center {
                //    vertical-align: middle; // 根据类名 来设置 垂直居中
                // }
            },
            {
                title: '标题2',
                dataIndex: 'title2',
                width: '40%',
                align: 'center',
                className: 'table-center',
            },
            {
                title: '操作',
                dataIndex: 'handle',
                width: '20%',
                align: 'center',
                className: 'table-center',
                // 插槽内容  
                slots: {
                    customRender: 'operation'
                }
            }
        ];
        // 这是行 数组长度为多少 就有多少行   一般建议使用  ref 绑定一个空数组
        let tableItem = ref([
            {
                id:'1', 
                title1: '我是标题一的内容',
                title2: '我是标题二的内容'
            }
        ]);
        const deleteHandle = (record)=>{
            console.log(record);
            //可以查看到 当前这一行的信息 也就是 tableItem 某一成员的信息  从而进行操作
        }
        const pageChange = (item) =>{
            //分页改变触发的回调 可查看改变后的信息
            console.log(item);
        }   
        return {
            pageObj,
            tableTitle,
            tableItem,
            deleteHandle,
            pageChange
        }
    },
    render() {
        const handleSlot = {
            //  对应 operation 的单元格 插槽内容
            operation: ({ record }) => {
                return (
                    <div>
                        <span
                            style={{ marginRight: '10px', cursor: 'pointer', color: '#1890ff' }}
                            onClick={() => {
                                this.deleteHandle(record);
                            }}
                        >
                            删除
                        </span>
                    </div>
                );
            }
        };
        return (
            <div>
                <a-table
                    columns={this.tableTitle}
                    data-source={this.tableItem}
                    bordered
                    v-slots={handleSlot} //插槽内容
                    row-key={(record,index) => index} //   必须写这个  vue的key唯一性 也可以用record.id，但是上面的tableItem成员里面每一项都要有id
                    pagination={this.pageObj} // 是否显示分页 是一个对象
                    onChange={this.pageChange} //  分页改变触发的回调
                ></a-table>
            </div>
        )
    }
})