[ 实战 ] [ 虚拟滚动 ] Ant Design Vue 表格支持全选功能

最新推荐文章于 2023-08-10 21:06:55 发布

我该如何去报答

最新推荐文章于 2023-08-10 21:06:55 发布

阅读量667

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_21181767/article/details/130954674

版权

本页面的代码基于此代码开发，请先阅读虚拟滚动、支持 Element-UI 、Ant Design Vue

推荐一个超好用的网站：silencelove.top
适宜：开发者、测试人员、学生

使用示例

<style>
	.ant-table-wrapper {
      height: 100%;
     }
     .ant-table-wrapper .ant-spin-container>.ant-table {
         height: 100%;
     }
<style>

<a-table id="elDataTable" 
	:data-source="viewportScroll.showData" :pagination="pagination" :row-key="(obj,index)=>obj.id"
	:row-selection="{ selectedRowKeys: viewportScroll.selectedRowKeys, onChange: onSelectChange ,preserveSelectedRowKeys:true}"
	:columns="[]">
</a-table>

vue({
	data:{
	   viewportScroll:{excludeHeight:0,itemHeight:49,selectedRowKeys:[] },
    },
    mounted() {
		this.viewportScroll.data= 原数据;
        initViewportScroll(elDataTable, this.viewportScroll);
	},
	methods{
        onSelectChange(selectedRowKeys) {
            this.viewportScroll.selectedRowKeys=selectedRowKeys;
        },
	}
})

虚拟滚动代码 js/viewport.scroll.js 增加方法

// 在原有方法 function initOptions 中添加代码
// let def = {
	// 新增的属性
    rowKey:'id',
//};

// 在原有方法 function run(options) 中添加代码
 if(options.selectedRowKeys!==undefined){
	 requestAnimationFrame(()=>{
	    refreshSelSelectAll(options);
	 });
 }

// 新增以下代码
function refreshSelSelectAll(options){
        if(options.selectedRowKeys===undefined){
            return;
        }

        let target=options.$checkboxAll;
        if(!target){
            target=options.$scroll.querySelector('table > thead > tr > th.ant-table-cell.ant-table-selection-column > div > label > span > input');
            options.$checkboxAll=target;
            options.$checkboxAll.addEventListener('change',(event)=>{
                let target=event.target;
                console.log('$checkboxAll change ',target.checked);
                options.selectedRowKeys.length=0;
                if(target.checked){
                    options.selectedRowKeys.push(...options.data.map(item=>item[options.rowKey]));
                }
            },false);
        }

        let stateClass=['','ant-checkbox-indeterminate','ant-checkbox-checked'];

        let selectedRowKeysLength=options.selectedRowKeys.length;
        let state= selectedRowKeysLength === options.dataLength?2:selectedRowKeysLength>0?1:0;

        let parent = target.parentNode;
        let parentClassList = [...parent.classList];
        if (state === 0) {
            parent.classList.remove(stateClass[1], stateClass[2]);
        } else if (state === 1) {
            if (!parentClassList.includes(stateClass[1])) {
                parent.classList.add(stateClass[1]);
            }
            if (parentClassList.includes(stateClass[2])) {
                parent.classList.remove(stateClass[2]);
            }
        } else if (state === 2) {
            if (parentClassList.includes(stateClass[1])) {
                parent.classList.remove(stateClass[1]);
            }
            if (!parentClassList.includes(stateClass[2])) {
                parent.classList.add(stateClass[2]);
            }
        }
    }