jeecg-boot表格默认勾选问题处理

**

jeecg-boot表格默认勾选问题处理

**

---

前言

提示：这是基于jeecg-boot官方文档的小拓展：

需求说明：表格引用BasicTable时，打开页面，需要根据条件默认选中多行数据。

一、BasicTable是什么？

基于Ant Design Vue 封装的table 组件 BasicTable ，用于展示列表数据。

二、使用步骤

1.引入库

代码如下（示例）：

import{ BasicColumn, BasicTable, TableAction} from '/@/components/Table'
import{useListPage} from '/@/hooks/system/useListPage'

2.添加表格标签

代码如下（示例）：

 <BasicTable @register="registerTable" :row-selection="rowSelection">

        </BasicTable>

3.初始化数据

let data=[
                {
                id: '1',
                name: '张三',
                age: 32,
                address: '北京',
                },
                {
                id: '2',
                name: '李四',
                age: 32,
                address: '上海',
                },
                {
                id: '3',
                name: '王二',
                age: 32,
                address: '深圳',
                },
            ];

2.初始化表格

const {tableContext} = useListPage({
        designScope:'basic-table-demo',
        tableProps:{
            title:'可选择表格', 
            dataSource:data,
            columns:[
               {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                    resizable: true,
                },
                {
                    title: '年龄',
                    dataIndex: 'age',
                    key: 'age',
                },
                {
                    title: '住址',
                    dataIndex: 'address',
                    key: 'address',
                },
            ],
             rowKey:'id',
            //定义rowSelection的类型，默认是checkbox多选，可以设置成radio单选 
            rowSelection:{
                type:'checkbox',
                onChange() {
                	//勾选时的事件
                    console.log(selectedRowKeys.value);
                    for(let i=0;i<selectedRowKeys.value.length;i++){
                        for(let j=0;j<data.length;j++){
                            if(data[j].id==selectedRowKeys.value[i]){
                                console.log(data[j].name);
                            }
                        }
                    }
                },
            },
            
        },
        
    }); 
   
    const [registerTable, { reload },{ rowSelection, selectedRows, selectedRowKeys } ] = tableContext;
    
    selectedRowKeys.value=["1"，"3"];//设置默认选中的id，
    reload;//重新加载
    console.log(selectedRowKeys.value);

其他功能详情，可参考官方文档https://help.jeecg.com/component/BasicTable.html

总结

以上就是今天要讲的内容，本文仅仅简单介绍了小编在工作时遇到的疑惑及解答，有不恰当的地方欢迎大家指正。