Compute

作者: royluck | 来源:发表于2022-10-07 14:50 被阅读0次
    可以获取Props 和 Data 中的值,方法不支持异步。可以是方法或者值。使用场景比较多。
    
    - 转换数据
    <template>
        <el-table :data="datalist">
            ...
        </el-table>
    </template>
    
    <script>
        export default {
            name: 'ComputeDemo',
            data() {
                return {
                    resDataList : []
                }
            },
            computed: {
               userStateList() {
                   return this.$store.state.dict.userStateList || []
               },
               userStateMap: {
                   const map = {}
                   this.userStateList.forEach(item => {
                       map[item.code] = item
                   })
                   return map
               },
               datalist() {
                   const { resDataList, userStateMap} = this
                   return resDataList.map(item => {
                       return {
                           ...item,
                           userStateDesc: userStateMap[item.userState].desc || ''
                       }
                   })
               }
            }
            created() {
                this.init()
            },
            methods: {
                init() {
                    this.requestDict()
                    this.requestList()
                },
                requestDict() {
                    this.$store.dispath('dict/getDict', {dicts: ['userStateList']})
                },
                requestList() {
                    return this.$store.dispath('dict/getDict', {dicts: ['userStateList']})
                    .then(data => {
                        this.resDataList = data?.list || []
                        return data
                    })
                }
            }
        }
    
    </script>
    
    - 双向绑定 Props或者Vuex
    <template>
        <div>
            <el-input v-model="username" />
            <el-input v-model="userState" />
        </div>
    </template>
    
    <script>
        export default {
            name: 'ComputeDemo',
            props: {
                value: {
                    type: String,
                    default: ''
                }
            },
            computed: {
               username: {
                   get() {
                       return this.value
                   },
                   set(val) {
                       this.$emit('updateValue', val)
                   }
               },
               userState: {
                   get() {
                       return this.$store.state.user.userState
                   },
                   set(val) {
                       this.$store.commit('user/SET_USER_STATE', val)
                   }
               }
            }
        }
    
    </script>
    
    - 日期合并拆分
    <template>
        <div>
            <el-date-picker v-model="date" type="daterange" />
        </div>
    </template>
    
    <script>
        export default {
            name: 'ComputeDemo',
            data() {
                return {
                    stateDate,
                    endDate
                }
            }
            computed: {
               date: {
                   get() {
                       const {stateDate, endDate} = this 
                       if(stateDate&& endDate) {
                           return [stateDate, endDate]
                       }
                       return []
                   },
                   set(val) {
                       const [stateDate, endDate] = val 
                       this.stateDate = stateDate
                       this.endDate= endDate
                   }
               }
            }
        }
    
    </script>
    

    相关文章

      网友评论

          本文标题:Compute

          本文链接:https://www.haomeiwen.com/subject/iffwartx.html