vue3 watch及computed的使用案例

最新推荐文章于 2024-09-16 17:05:08 发布

Software攻城狮

最新推荐文章于 2024-09-16 17:05:08 发布

阅读量146

点赞数

分类专栏： Vue3 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/126192100

版权

Vue3 专栏收录该内容

12 篇文章

订阅专栏

vue3 watch及computed的使用案例

//可以多个watch 一起使用
() => state.selectTreeList,
    (val) => {
        const treeData = _.cloneDeep(val)
        // 所属行业为:保理(6640),且所属地区只有省份,没有城市区县
        // 去掉省级下面的children,并改掉省级名字--直接显示为 ‘省属’
        let provinceCode = formConfig.model.placeArea
        let provinceNum = 0 //如果是只有省的话+1
        if (treeData.length > 0) {
            treeData.forEach((item) => {
                if (item.id === provinceCode) {
                    provinceNum += 1
                }
            })
        }
        if (formConfig.model.industryType === '6640' && provinceNum > 0) {
            treeData.map((item, index) => {
                // treeData[index].children = []
                if (item.id === provinceCode) {
                    item.name = '省属'
                }
            })
        }
        //
        formConfig.formItems.forEach((item) => {
            if (item.prop === 'placeArea') {
                item.render = (prop) => {
                    return (
                        <g-select-tree
                            disabled='true'
                            treeData={treeData}
                            everyChoose
                            v-model={prop.value}
                        />
                    )
                }
            }
        })
    },
    { deep: true }
)
watch(
    () => route.query,
    (data) => {
        if (!_.isEmpty(data)) {
            emits('getRouteQuery', data)
        }
    },
    {
        immediate: true
    }，
    {
        deep: true
    }
)
watch(
    () => state.districtList,
    (val) => {
        getOpitons(val, 'district')
    }
)
function getOpitons(val, propName) {
    if (val.length > 0) {
    //更改对象中的属性名
        const options = val.map((el) => {
            return {
                label: el.name,
                value: el.id
            }
        })
        formConfig.formItems.forEach((item) => {
            if (item.prop === propName) {
                item.controlConfig['options'] = options
                // item.controlConfig['props']['disabled'] = false
            }
        })
    } else {
        formConfig.formItems.forEach((item) => {
            if (item.prop === propName) {
                item.controlConfig['props']['disabled'] = true
            }
        })
    }
}

...

 watchEffect(() => {
        
        forParent({
           
        })
    })

...

const emits = defineEmits([
    'update:show',
    'update:rowedit',
    'update:rowdetails',
    'update:rowadd',
    'update',
    'change',
    'hide'
])

const localModalShow = computed({
    get: () => props.show,
    set: (val) => {
        emits('update:show', val)
    }
})
const localrowdetails = computed({
    get: () => props.rowdetails,
    set: (val) => {
        emits('update:rowdetails', val)
    }
})

const boxPaddingTop = computed(() =>
    props.config.hideToolBox && !props.config.title ? size2Rem(25) : 0
)