el-table的一些问题
问题遇到的现象和发生背景
写了一个任务列表，想把任务栏状态和颜色随任务状态不同而变化，但是我当我把自己的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)}} -->
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为接收人时
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;
};
}
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
- 这篇文章：el-table表头自适应宽度(解决出现省略号的问题) 也许能够解决你的问题，你可以看下