关于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的知识点:

  1. 命名空间

  1. 辅助函数

  1. 子仓库


<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:{

    },

}

渲染成功

Logo

前往低代码交流专区

更多推荐