vue3 + ts中filter和includes的结合使用

   //国家接口

        const getNation = (() => {

            getCountry(store.state.diag_token || store.state.diag_h5token)

                .then((res: any) => {

                    console.log('----------------------201', res)

                    const len = res.length;

                        //使用filter过滤接口返回的国家列表res,对res进行过滤

                        //返回id不等于146,119,63的国家数据列表

                    const filterCountry = res.filter((item:any) => ![146,119,63].includes(item.id)  )

                    console.log('--------------------------206',filterCountry)


 

                    if (len % 10 !== 0) {

                        diagnoseInfo.page = Math.floor(len / 10 + 1);

                    } else {

                        diagnoseInfo.page = len / 10;

                    }

                    if (res && diagnoseInfo.showFirst) {

                        for (let j = 0; j <= 19; j++) {

                            diagnoseInfo.countryList.push(res[diagnoseInfo.counter]);

                            diagnoseInfo.counter++;

                        }

                        setTimeout(() => {

                            diagnoseInfo.showFirst = false;

                        }, 500)

                    }

                    if (loadingN.value && !diagnoseInfo.showFirst) {

                        setTimeout(() => {

                            // for (let i = 0; i < diagnoseInfo.page; i++) {

                            if (len >= diagnoseInfo.counter + 20) {

                                for (let j = 0; j <= 19; j++) {

                                    diagnoseInfo.countryList.push(res[diagnoseInfo.counter]);

                                    if (diagnoseInfo.counter >= len - 1) {

                                        // 数据全部加载完成

                                        loadingN.value = false;

                                        finished.value = true;

                                        return

                                    }

                                    diagnoseInfo.counter++;


 

                                }

                            } else {

                                const aa = len - diagnoseInfo.counter;

                                if (aa > 0) {

                                    for (let i = 1; i <= aa; i++) {

                                        if (diagnoseInfo.counter >= len) {

                                            finished.value = true;

                                            // 加载状态结束

                                            loading.value = false;

                                            return

                                        }

                                        diagnoseInfo.countryList.push(res[diagnoseInfo.counter]);

                                        diagnoseInfo.counter++;

                                    }


 

                                } else {

                                    finished.value = true;

                                    // 加载状态结束

                                    loadingN.value = false;

                                    return

                                }

                            }


 

                            // 加载状态结束

                            loadingN.value = false;



 

                        }, 1000);

                    }

                })

                .finally(() => {

                    loadingN.value = false;

                })

        })

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用vue3和ts语法封装一个树形组件: 1. 创建一个Vue组件,命名为Tree,该组件将接受以下属性: ```ts interface TreeNode { id: string; name: string; children?: TreeNode[]; } interface TreeProps { treeData: TreeNode[]; collapsable?: boolean; showCheckbox?: boolean; disabledCheckboxIds?: string[]; defaultCheckedIds?: string[]; onChecked?: (checkedIds: string[]) => void; } ``` 其,treeData是树结构的数据,collapsable表示节点是否可折叠,showCheckbox表示是否显示复选框,disabledCheckboxIds表示禁用某些节点的复选框,defaultCheckedIds表示默认选的节点,onChecked表示选节点时的回调函数。 2. 在组件的setup函数,先声明一些响应式数据: ```ts import { ref, reactive } from 'vue'; interface CheckboxState { [id: string]: boolean; } export default { props: { //... }, setup(props: TreeProps) { const treeData = ref(props.treeData); const checkboxState = reactive<CheckboxState>({}); const checkedIds = computed(() => { return Object.keys(checkboxState).filter(id => checkboxState[id]); }); } } ``` 这里用ref存储treeData数据,并用reactive将checkboxState声明为响应式对象,用computed计算出选的节点列表。 3. 定义一些内部方法,用于处理树结构的展开、折叠、选、取消选等操作: ```ts export default { //... setup(props: TreeProps) { //... const expandCollapse = (id: string) => { // 处理展开折叠操作 }; const checkUncheck = (id: string) => { // 处理选取消选操作 }; const isIndeterminate = (id: string) => { // 判断某个节点是否处于部分选状态 }; const getCheckedStatus = (id: string) => { // 获取某个节点的选状态 }; } } ``` 4. 最后,编写模板的代码,用递归方式展示树形结构,根据props的属性动态显示折叠、复选框等。 ```html <template> <div class="tree"> <ul> <li v-for="node in treeData" :key="node.id"> <div class="tree-node"> <span v-if="collapsable" @click="expandCollapse(node.id)"> {{ node.children ? (collapsedNodes.includes(node.id) ? '▶' : '▼') : '' }} </span> <input v-if="showCheckbox && !disabledCheckboxIds.includes(node.id)" type="checkbox" :indeterminate="isIndeterminate(node.id)" :checked="getCheckedStatus(node.id)" @change="checkUncheck(node.id)"> <span>{{ node.name }}</span> </div> <tree v-if="node.children && (!collapsable || !collapsedNodes.includes(node.id))" :treeData="node.children" :collapsable="collapsable" :showCheckbox="showCheckbox" :disabledCheckboxIds="disabledCheckboxIds" :defaultCheckedIds="defaultCheckedIds" :onChecked="onChecked" :key="node.id" /> </li> </ul> </div> </template> ``` 以上就是使用vue3和ts语法封装一个树形组件的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值