<el-table
:data="rightsDate"
border
:header-cell-style="this.$store.state.settings.headerStyle">
<el-table-column
v-for="(item,index) in titleList"
:key="index"
:label="item.label"
:prop="item.prop">
<template slot-scope="scope">
<!-- 第一列 -->
<div v-if="scope.row[item.prop]">
<div>{{scope.row[item.prop].contentOne}}</div>
<div>{{scope.row[item.prop].contentTwo}}</div>
</div>
<!-- 第二列 -->
<div v-if="scope.row[item.prop]">
<div v-if="scope.row[item.prop].type === 1" style="width: 100%; display: flex; align-items: center">
{{scope.row[item.prop].title}}:
<div style="width:40%">
<el-select size="mini" v-model="scope.row[item.prop].number" placeholder="">
<el-option label="0" value="0"> </el-option>
<el-option label="1" value="1"> </el-option>
</el-select>
</div>
</div>
<div v-if="scope.row[item.prop].type === 4" >
<div v-if="scope.row[item.prop].isContent.view">
<el-input size="mini"
type="textarea"
:rows="2"
placeholder="请输入内容"
resize="none"
v-model="scope.row[item.prop].isContent.content">
</el-input>
</div>
</div>
<div v-if="scope.row[item.prop].type === 2">
<div v-if="scope.row[item.prop].isLevel.view" style="width: 100%; display: flex; align-items: center">
<div style="width: 40%">
<el-select size="mini" v-model="scope.row[item.prop].isYesNo" placeholder="" @change="onYse(scope.row[item.prop])">
<el-option label="Yes" value="Yes"> </el-option>
<el-option label="No" value="No"> </el-option>
</el-select>
</div>
<div style="width:20%;" v-if="scope.row[item.prop].isYesNo =='Yes'">{{scope.row[item.prop].title}}</div>
<div style="width: 40%" v-if="scope.row[item.prop].isYesNo =='Yes'">
<el-select size="mini" v-model="scope.row[item.prop].number" placeholder="">
<el-option label="0" value="0"> </el-option>
<el-option label="1" value="1"> </el-option>
</el-select>
</div>
</div>
<div v-else style="width: 40%">
<div style="width:20%;" v-if="scope.row[item.prop].isYesNo == 'Yes'">{{scope.row[item.prop].title}}</div>
<el-select size="mini" v-model="scope.row[item.prop].isYesNo" placeholder="" @change="onYse(scope.row[item.prop])">
<el-option label="Yes" value="Yes"> </el-option>
<el-option label="No" value="No"> </el-option>
</el-select>
</div>
</div>
<div v-if="scope.row[item.prop].type === 3" style="width: 100%;">
{{scope.row[item.prop].isApplicable.applicable}}
<div>
<div v-if="scope.row[item.prop].isApplicable.view" style="width:40%">
<el-select size="mini" v-model="scope.row[item.prop].isApplicable.applicable" placeholder="" @change="applicable(scope.row[item.prop])">
<el-option label="Not applicable" value="1"> </el-option>
<el-option label="Silimar actions planned" value="2"> </el-option>
<el-option label="No actions planned" value="3"> </el-option>
<el-option label="ActionsFinished" value="4"> </el-option>
<el-option label="Actions planned" value="5"> </el-option>
</el-select>
</div>
<div v-if="scope.row[item.prop].isApplicable.applicable == '2' || scope.row[item.prop].isApplicable.applicable == '5' " style="width:40%;margin-top:10px">
<el-date-picker
style="width: 100%"
size="mini"
v-model="scope.row[item.prop].isDate.date"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<div v-if="scope.row[item.prop].isContent.view" style="margin-top:10px">
<el-input
size="mini"
type="textarea"
:rows="2"
resize="none"
placeholder="请输入内容"
v-model="scope.row[item.prop].isContent.content">
</el-input>
</div>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
titleList: [
{
label: "OneRow",
prop: "OneRow"
},
{
label: "WSA1",
prop: "WSA"
},
{
label: "WSM22",
prop: "WSM22"
},
{
label: "WSM32",
prop: "WSM3"
}
],
rightsDate: [
//方案一
{
OneRow: {
contentOne:'//粗文字1',
contentTwo:'//细文字2',
},
WSA: {
type:1,//使用方案一
title:'Benifit1',
number:1,
isYesNo:'',
applicable:'',
date:'',
content:'',
},
WSM22: {
type:1,//使用方案一
title:'Benifit2',
number:0,
isYesNo:'',
applicable:'',
date:'',
content:'',
},
WSM3: {
type:1,//使用方案一
title:'Benifit3',
number:3,
isYesNo:'',
applicable:'',
date:'',
content:'',
}
},
//方案二
{
OneRow: {
contentOne:'Repeat failure',
contentTwo:'',
},
WSA: {
type:2,//使用方案二
title:'Level:',
isLevel: {
view: true,
},
number:1,//Benifit&Level
isYesNo:'Yes',
applicable:'',
date:'',
content:'',
},
WSM22: {
type:2,//使用方案二
isLevel: {
view: true,
},
title:'Level:',
number:'',//Level
isYesNo:'Yes',
applicable:'',
date:'',
content:'',
},
WSM3: {
isLevel: {
view: false,
},
type:2,//使用方案二
title:'Level:',
number:'',//Level
isYesNo:'NO',
applicable:'',
date:'',
content:'',
}
},
//使用方案四
{
OneRow: {
contentOne:'//粗文字1',
contentTwo:'//细文字2',
},
WSA: {
type:4,//使用方案4
isContent: {
view: true,
content:'11',
},
},
WSM22: {
type:4,//使用方案4
isContent: {
view: true,
content:'22',
},
},
WSM3: {
type:4, //使用方案4
isContent: {
view: false,
content:'',
},
}
},
//方案三
{
OneRow: {
contentOne:'Action for MRC21',
contentTwo:'Update....1',
},
WSA: {
type:3,//使用方案三
title:'',
number:'',//Benifit&Level
isYesNo:'',
applicable:'',
date:'',
content:'',
isDate: {
view: true,
date: '2020/06/21'
},
isContent: {
view: true,
content:'22',
},
isApplicable: {
view: true,
applicable:'1',
}
},
WSM22: {
type:3,//使用方案三
title:'',
number:'',//Benifit&Level
isYesNo:'',
applicable:'',
date:'',
content:'',
isApplicable: {
view: true,
applicable:'2',
},
isDate: {
view: true,
date: '2020/06/21'
},
isContent: {
view: true,
content:'Modify the parting line..SDR',
},
},
WSM3: {
type:3,//使用方案三
title:'',
number:'',//Benifit&Level
applicable:'',
date:'',
content:'',
isYesNo:'',
isApplicable: {
view: false,
applicable:'',
},
isDate: {
view: false,
date: ''
},
isContent: {
view: false,
content:'',
},
}
},
]
方法
methods: {
/**
* 是否显示 LEVEl
* @value 是否显示选择框
*/
onYse(value) {
if(value.isYesNo == 'No') {
value.isLevel.view = false;
} else {
value.isLevel.view = true;
}
},
/**
* 是否显示 文本框
* @value 是否显示 文本框
*/
applicable(value) {
let changValue = value.isApplicable.applicable;
switch (changValue) {
case '1':
value.isContent.view = true;
break;
case '3':
case '4':
value.isContent.view = true;
break;
case '2':
case '5':
value.isContent.view = true;
break;
default:
value.isContent.view = true;
break;
}
console.log(value);
}
}
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- nryq.cn 版权所有 赣ICP备2024042798号-6
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务