el-table的一些问题

Question

问题遇到的现象和发生背景

写了一个任务列表，想把任务栏状态和颜色随任务状态不同而变化，但是我当我把自己的id设置为任务发起人时，可以变化，但当我把id设置为任务接收人时，失效了，写的逻辑两个状态（任务状态和每个接收人的任务状态）,当id=发起人时,判断任务状态是否为1，当id=接收人时判断个人任务状态，id设置（getTaskId.id）123为发起人，123456为接收人，求问为什么换个id就失效了

用代码块功能插入代码，请勿粘贴截图

<template>
    <div id = "task" class="task">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" style="width:15%">任务</el-menu-item>
            <el-menu-item index="2" style="width:40%">
                <div class="block">
                    <el-cascader
                        v-model="taskValue"
                        :options="options"
                        @change="handleChange"></el-cascader>
                </div>
            </el-menu-item>
            <el-menu-item index="3" style="width:45%">
                <el-select v-model="tskDate" placeholder="请选择" style="width:100%">
                    <el-option
                        v-for="item in tskop"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-menu-item>
        </el-menu>
        <el-table
        :data="this.getTaskList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @expand-change="computePercen"
        :header-cell-style="{'backgroundColor':'#17B3A3', 'color': '#fff'}">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left"
                    inline 
                    class="demo-table-expand">
                        <el-form-item label="任务名称">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="任务内容">
                            <span>{{ props.row.text }}</span>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="任务期限">
                            <span>{{ props.row.starttime }}--{{ props.row.endtime }}</span>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="发起人">
                            <span>{{ props.row.promoterID.name }}</span>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="接收人">
                            <el-collapse @change="handleChange">
                                <el-collapse-item title="展开查看具体人员">
                                    <el-table :data="props.row.recipientID" height="100%" width="396%">
                                        <el-table-column min-width="70%" property="name" label="姓名"></el-table-column>
                                        <el-table-column min-width="80%" 
                                        property="state" 
                                        label="完成情况"
                                        :formatter="stateF">
                                        {stateF(scope.row)}}</template> -->
                                        </el-table-column>
                                        <el-table-column min-width="246%" property="feedBack" label="任务反馈"></el-table-column>
                                    </el-table>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="所属模块">
                            <span>{{ifModel(props.row.model)}}</span>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="已完成人员">
                            <div v-if="props.row.state===0">
                                <el-progress type="circle" :percentage="computeP">
                                </el-progress>
                            </div>
                            <div v-if="props.row.state===1">
                                <el-progress type="circle" :percentage="100" status="success">
                                </el-progress>
                            </div>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            label="发起时间"
            prop="starttime">
            </el-table-column>
            <el-table-column
            label="任务名称"
            prop="name">
            </el-table-column>
            <el-table-column
            label="任务状态"
            prop="state"
            >
            <template slot-scope="scope">{{stateS(scope.row)}}</template>
            </el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-dropdown placement="bottom" trigger="click">
                        <span class="el-dropdown-link">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-edit">任务反馈</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-circle-check">完成任务</el-dropdown-item>
                            
                            <el-dropdown-item icon="el-icon-circle-close">删除任务</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name:'task123',
    components: {
    },
    data () {
        return {
            activeIndex: '1',
            taskId:'',
            taskoption: [
                { text: '全部任务', taskStat: 0 },
                { text: '已完成', taskStat: 1 },
                { text: '未完成', taskStat: 2 }
            ],
            tskop: [{
                value: '选项1',
                label: '一周内'
                }, {
                value: '选项2',
                label: '一月内'
                }, {
                value: '选项3',
                label: '三月内'
                },
            ],
            // tskStat:'选项1',
            taskValue: [],
            options: [{
                value: '1',
                label: '1',
                children: [{
                    value: '1',
                    label: '未完成',
                }, {
                    value: '2',
                    label: '已完成',
                }]
                }, {
                value: '1',
                label: '1',
                children: [{
                    value: '1',
                    label: '未完成',
                }, {
                    value: '2',
                    label: '已完成',
                }]
                },
                {
                value: '1',
                label: '1',
                children: [{
                    value: '1',
                    label: '未完成',
                }, {
                    value: '2',
                    label: '已完成',
                }]
                },
            ],
            tskDate:'',
            taskTableData: [],
            deleteById: {
                id:0
            },
            computeP:0,
            count:0,
            completeId:{
                id:0,
                data:''
            },
            countS:0,
            getTaskId:{
                id:'123',
            },
            getTaskList:[{
                id:53,
                name:'qqqq',
                state:1,
                text:'犬瘟热推推哦怕',
                starttime:'2022-11-06',
                endtime:'2022-11-19',
                model:1,
                promoterID:{"id":"123","name":"谢深"},
                recipientID:[{"id":"123456","name":"吴宏","state":1,"feedBack":"无"}]
            },
            {
                id:1,
                name:'hhhh',
                state:0,
                text:'反倒是更何况是',
                starttime:'2022-10-06',
                endtime:'2022-11-33',
                model:1,
                promoterID:{"id":"123","name":"谢深"},
                recipientID:[{"id":"123456","name":"吴宏","state":0,"feedBack":"无"}]
            }
            ]
        }
    },
    mounted(){
    },
    methods: {
        //判断任务状态颜色      异常
        tableRowClassName({row,rowIndex}){
            console.log(row);
              //当id为发起人                        
            if(row.promoterID.id === this.getTaskId.id){
                if(row.state===0){
                    return 'warning-row';
                }
                else{
                    return 'success-row';
                }
            }else{
                  //当id为接收人
                row.recipientID.some(p => {
                    if(p.id === this.getTaskId.id){
                        if(p.state===0){
                            return 'warning-row';
                        }
                        else{
                            return 'success-row';
                        }
                    }
                })
            }
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        endTask(index,row){
        },
        taskBack(index,row){
        },
        deleteTask(index,row){
        },
        handleChange(value) {
        },
        computePercen(row,expandRows){
            this.count = 0;
            let leng = row.recipientID.length;
            row.recipientID.forEach(element => {
                if(element.state === 1){
                    this.count += 1;
                }
            });
            this.computeP = Math.round(this.count / leng * 100);
        },
        //判断最里面列表的个人任务状态，测试正常
        stateF(row){
            console.log(row);
            if(row.state === 1){
                return '完成'
            }else{
                return '未完成'
            }
        },
         //判断任务状态    异常
        stateS(row){
            //当id=发起人
            if(this.getTaskId.id === row.promoterID.id){
                if(row.state === 1){
                    return '完成'
                }else{
                    return '未完成'
                };
            }else{
                //当id=接收人
                row.recipientID.some(p => {
                    if(p.id === this.getTaskId.id){
                        // return p.state?'已完成':'未完成';
                        if(p.state===1){
                            return '已完成';
                        }else{
                            return '未完成';
                        }
                    }
                })
            };
        },
        ifModel(m){
            switch(m){
                case 1:
                    return '1';
                case 2:
                    return '2';
                case 3:
                    return '3';
            }
        }
    },
    computed:{
    }
    }
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
<style>
    .task .dialog{
        background: white;
        border-radius: 3%;
    }
    .el-message-box{
        width:70%;
    }
    .task .el-table .warning-row {
    background: oldlace;
  }

  .task .el-table .success-row {
    background: #f0f9eb;
  }
  .task .el-form-item{
        margin: 0;
  }
  .task .el-divider--horizontal{
        margin: 0;
  }
  .task .el-form-item__label{
        /* display: inline-flex;
        margin-right: 1%; */
  }
  .task  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
</style>

id为发起人时

id为接收人时

Answer 1

tableRowClassName、stateS改下面那样，som中的return值是返回给回调函数的，并不是tableRowClassName、stateS的返回值

            tableRowClassName({ row, rowIndex }) {
                console.log(row);
                //当id为发起人
                if (row.promoterID.id === this.getTaskId.id) {
                    if (row.state === 0) {
                        return 'warning-row';
                    }
                    else {
                        return 'success-row';
                    }
                } else {
                    //当id为接收人
                    let cls = '';
                    row.recipientID.some(p => {
                        if (p.id === this.getTaskId.id) {
                            if (p.state === 0) {
                                cls= 'warning-row';
                            }
                            else {
                                cls = 'success-row';
                            }
                            return true;/////
                        }
                    })
                    return cls;//这里return才是tableRowClassName的返回值，some回调中的return只是回调返回值，下面的stateS同理
                }
            }




            stateS(row) {
                //当id=发起人
                if (this.getTaskId.id === row.promoterID.id) {
                    if (row.state === 1) {
                        return '完成'
                    } else {
                        return '未完成'
                    };
                } else {
                    //当id=接收人
                    let state = '';
                    row.recipientID.some(p => {
                        if (p.id === this.getTaskId.id) {
                            // return p.state?'已完成':'未完成';
                            if (p.state === 1) {
                                state= '已完成';
                            } else {
                                state = '未完成';
                            }
                            return true;///////////////
                        }
                    })
                    return state;
                };
            }