可以获取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>
