Vue计算属性Computed传参
Vue计算属性Computed传参
·
关于computed计算属性传参的问题,因为computed是计算属性,如果给conputed传参则会直接报错,并且报computed is not function。
解决办法:
方法一:
通过返回函数来进行传参:
代码:
computed:{
...mapState(['tableData']),
checkDate:()=>{
let nowTime = new Date()
let year = nowTime.getFullYear()
return (obj)=>(obj.time == year ? true:false)
}
},
分析:
既然计算属性不能做函数一样进行传参,但是computed有一个return我们可以利用起来,所以我们直接返回一个函数,这样就可以解决computed属性不能传参的问题。
方法二:
还有一种解决computed属性不能传参的办法就是将computed中的方法写道menthods中。
实例:
这是一个后台管理系统中的一个小功能:假如当天的日期和用户的生日相同时,自动将用户的生日进行东台渲染,以达到提示的意义。
用户组件代码:
HTML使用的是elementUI框架
扩展:
在这里使用了插槽的知识点,因为要将年龄进行传参,需要获取当前行的数据,所以使用插槽‘’slot-scope=‘’‘’
HTML代码
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="编号" width="240"></el-table-column>
<el-table-column prop="name" label="姓名" width="220">
<template slot-scope="scoped">
<span @click='changeEdit(scoped.row)' v-if="!scoped.row.edit">{{ scoped.row.name }}</span>
<el-input @blur="changeName(scoped.row)" v-model="userName" v-else placeholder="请输入用户名"></el-input>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scoped">
<span v-if="scoped.row.age<=30">青年</span>
<span v-else-if="scoped.row.age<=60">中年</span>
<span v-else>老年</span>
<span></span>
</template>
</el-table-column>
<el-table-column prop="dept" label="部门"></el-table-column>
<el-table-column prop="bir" label="学科">
<template slot-scope="scoped">
<span :class="{mycolor:checkDate(scoped.row)}">{{ scoped.row.bir }}</span>
</template>
</el-table-column>
<el-table-column prop="time" label="入职月份">
</el-table-column>
</el-table>
</div>
</template>
JS代码:
其中在代码中,使用了辅助函数来获取子仓库的值
这里有关于Vuex的知识点:
命名空间
辅助函数
子仓库
<script>
//只能获取主仓库数据,无法获取子仓库数据
// import {mapState} from 'vuex'
import {createNamespacedHelpers} from 'vuex' //可以帮助从指定命名空间寻找数据
const {mapState,mapMutations} = createNamespacedHelpers('userModules')
export default {
data(){
return {
userName:'',
nowTime:new Date(),
}
},
methods:{
...mapMutations(['changeTableData']),
changeEdit(obj){
obj.edit = true
this.userName = obj.name
},
changeName(obj){
obj.edit = false
obj.name = this.userName
this.changeTableData(obj)
}
},
computed:{
...mapState(['tableData']),
checkDate:()=>{
let nowTime = new Date()
let year = nowTime.getFullYear()
return (obj)=>(obj.time == year ? true:false)
}
},
};
</script>
<style scoped>
.mycolor{
color:tomato
}
</style>
子仓库中用户的代码:
export default {
//开启命名空间,默认会将文件名作为仓库名字
namespaced:true,
state:{
tableData:[
{
id: 1,
name: '王小虎',
age: '17',
dept:'土木工程',
bir:'理工科',
time:2024,
edit:false
}
]
},
mutations:{
changeTableData(state,obj){
console.log(obj);
const result = state.tableData.find(item=>item.id == obj.id)
result.name = obj.name
}
},
actions:{
},
}
渲染成功
更多推荐
已为社区贡献2条内容
所有评论(0)