学会新版本vue3+Antd jsx Table表格使用

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

新年新气象，肯定要学最新的，新版本vue3+Antd jsx Table表格基本使用，实现表格序号翻页后连续自增

首先你要使用vue3的antd，第一步就是得安装最新的vue3版本，参考官网v3.cn.vuejs.org/guide/intro…

接下来就是安装Antd，官网2x.antdv.com/components/…

使用方法：

1、引入组件

import { Table, message } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
var app = createApp(App);
app.use(Table);
app.use(store).use(router).mount('#app')

2、定义一个表格的基本参数信息：

let pageObj = reactive({ 
    pageCur: 1,  // 当前的页数
    pageSize: 10, // 一页显示的条数
    total: 0 , // 表格数据总共的条数
    current：1 // 表格翻页之后 自己变化的一个参数
   })

3、模拟几条假的数据

    // 表格的第一行 title  一般做为标题内容
        let tableTitle = [
            {
                title: '标题1',   // 标题1
                dataIndex: 'title1',   // 标题那一列的绑定
                width: '40%',   // 设置 这一标题（列）单元格的宽度
                align: 'center',   //设置（该列）内容水平居中
                className: 'table-center'   // 设置（该列）的类名
                // .table-center {
                //    vertical-align: middle;   // 根据类名 在css样式里面 来设置 垂直居中
                // }
            },
             {
              title: '序号',
              dataIndex: 'order',
              key: 'order',
              width: '10%',
              align: 'center',
              className: 'table-center',
              slots: {
          	  customRender: 'order' // 定义一个插槽 实现表格序号翻页后连续自增
         	 }
            },
            {
                title: '操作',
                dataIndex: 'handle',
                width: '20%',
                align: 'center',
                className: 'table-center',
                // 插槽内容 有时候表格里面需要点击操作啥的 或者样式需要单独组件  可以使用插槽
                slots: {
                    customRender: 'operation'
                }
            }
        ];
        
   // 这是行 数组长度为多少 就有多少行   一般建议使用  ref 绑定一个空数组 方便接口数据处理双向绑定；数组长度有多少 就有多少行
        let tableItem = ref([
            {
                id:'1', 
                title1: '我是标题一的内容',
                title2: '我是标题二的内容'
            }
        ]);

4、组件绑定参数、插槽和事件

 render() {
        const handleSlot = {
            //  对应 operation 的单元格 插槽内容  名字必须对上
            operation: ({ record }) => {
                return (
                    <div>
                        <span
                            style={{ marginRight: '10px', cursor: 'pointer', color: '#1890ff' }}
                            onClick={() => {
                                this.deleteHandle(record);
                            }}
                        >
                            删除
                        </span>
                    </div>
                );
            },
            // { record,index } record代表对应一行的数据 index代表第一页行的下标 每页都是从0开始 所以通过当前页数来进行处理就可以实现翻页连续自增
            order: ({ index }) => { return <span>{(index += 1) + (this.pageObj.current - 1) * 10}</span>; }
        };
        return (
            <div>
                <a-table
                    columns={this.tableTitle}
                    data-source={this.tableItem}
                    bordered
                    v-slots={handleSlot} //绑定插槽内容
                    row-key={(record) => record.id} // 行  不写key  必须写这个  vue的唯一性 
                    pagination={this.pageObj} // 是否显示分页 是一个对象
                    onChange={this.pageChange} //  分页改变触发的回调
                ></a-table>
            </div>
        )
    }

5、事件函数

   const deleteHandle = (record)=>{
            console.log(record);
            //可以查看到 当前这一行的信息 也就是 tableItem 某一成员的信息  从而进行操作
        }
   const pageChange = (item) =>{
            //分页改变触发的回调 可查看改变后的信息
            console.log(item);
        }