创建复杂表格
1使用element中el-table来是实现(根据要求划分表格，合并长宽，使用判断语句来显示每个位置应该显示的内容，要求最开始有渲染的数据)
效果如图：
<template>
<div >
<el-form ref="opinionData" :inline="true" :model="opinionData" label-width="130px">
<el-table
border
:data="informationData"
:show-header="false"
>
<el-table-column
align="center"
width="130"
>
<template slot-scope="scope">
<el-radio v-if="scope.row.id == 1" v-model="opinionData.declareType" :disabled="isDisabled" label="正常申报" >正常申报</el-radio>
<el-radio v-if="scope.row.id == 2" v-model="opinionData.declareType" :disabled="isDisabled" label="破格申报" >破格申报</el-radio>
</template>
</el-table-column>
<el-table-column
prop="name"
align="center"
width="80"
>
</el-table-column>
<el-table-column
align="center"
width="120"
>
<template slot-scope="scope">
<el-input v-if="scope.row.id == 1" v-model="opinionData.declareName" :disabled="isDisabled" class="inputStyle" placeholder="请输入姓名"></el-input>
<el-input v-if="scope.row.id == 2" type="number" v-model.number="opinionData.age" :disabled="isDisabled" class="inputStyle" placeholder="请输入年龄"></el-input>
</template>
</el-table-column>
<el-table-column
prop="unitName"
align="center"
width="150"
>
</el-table-column>
<el-table-column
prop="type"
align="center"
width="200"
>
<template slot-scope="scope">
<el-input v-if="scope.row.id == 1" v-model="opinionData.workUnit" :disabled="isDisabled" class="inputStyle" placeholder="请输入内容"></el-input>
<el-checkbox-group v-if="scope.row.id == 2" v-model="opinionData.specialtyList" :disabled="isDisabled">
<el-checkbox label="项目管理" :checked="checked" @change="checked=!checked">项目管理</el-checkbox>
<el-checkbox label="勘察设计" :checked="checked" @change="checked=!checked">勘察设计</el-checkbox>
<el-checkbox label="施工" :checked="checked" @change="checked=!checked">施工</el-checkbox>
<el-checkbox label="监理咨询" :checked="checked" @change="checked=!checked">监理咨询</el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
<el-table-column
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.id == 1">申报职称专业</span>
<el-input v-if="scope.row.id == 2" v-model="opinionData.majorDeclare" :disabled="isDisabled" class="inputStyle" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table>
<el-table
border
:data="basicListData"
:show-header="false"
:span-method="spanMethod"
>
<el-table-column
prop="type"
align="center"
width="200"></el-table-column>
<el-table-column
prop="sheetType"
align="center"
width="150"
></el-table-column>
<el-table-column
align="center"
>
<template slot-scope="scope">
<el-checkbox-group v-model="opinionData.politicalThoughtList" v-if="scope.row.id == 1 " :disabled="isDisabled">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">单位年审</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">党纪政纪</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">责任事故等</el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="opinionData.academic" v-if="scope.row.id == 2 " :disabled="isDisabled">
<el-radio label="博士">博士</el-radio>
<el-radio label="硕士">硕士</el-radio>
<el-radio label="大学">大学</el-radio>
<el-radio label="大专">大专</el-radio>
</el-radio-group>
<el-input v-model="opinionData.engineerYears" type="number" :disabled="isDisabled" v-if="scope.row.id == 3 " class="inputStyle" placeholder="请输入任工程师年限">
<template slot="append"><span>年</span></template>
</el-input>
<el-radio-group v-model="opinionData.licenceConditions" v-if="scope.row.id == 4 " :disabled="isDisabled">
<el-radio :label="true">具有破格条件</el-radio>
<el-radio :label="false">不具有破格条件</el-radio>
</el-radio-group>
<el-input v-model="opinionData.education" :disabled="isDisabled" v-if="scope.row.id == 5 " type="number" class="inputStyle" placeholder="总学时=90学时*任现职年限">
<template slot="append"><span>学时</span></template>
</el-input>
</template>
</el-table-column>
</el-table>
<el-table
border
:data="listData"
:span-method="objectSpanMethod"
>
<el-table-column
prop="type"
label="评审项目"
align="center"
width="200"></el-table-column>
<el-table-column
prop="sheetType"
label="评审细目"
align="center"
width="150"
>
<template slot-scope="scope">
<span v-if="scope.row.id == 1">内容完整性</span>
<span v-if="scope.row.id == 2">填写规范性</span>
<span v-if="scope.row.id == 3">申报态度评价</span>
<span v-if="scope.row.id == 4 || scope.row.id == 7 || scope.row.id == 10">A级标准</span>
<span v-if="scope.row.id == 5 || scope.row.id == 8 || scope.row.id == 11">B级标准</span>
<span v-if="scope.row.id == 6 || scope.row.id == 9 || scope.row.id == 12">C级标准</span>
<el-radio-group v-model="opinionData.opinions" v-if="scope.row.type == '专家意见'" :disabled="isDisabled">
<el-radio :label="1">同意</el-radio>
<el-radio :label="0">不同意</el-radio>
</el-radio-group>
<el-checkbox-group v-model="opinionData.agreeOopinion" v-if="scope.row.type == '同意理由'" :disabled="isDisabled || opinionData.opinions ==0">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">综合能力强</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">业绩突出</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">成果突出</el-checkbox>
<el-checkbox label="3" :checked="checked" @change="checked=!checked">学术突出</el-checkbox>
<el-checkbox label="4" :checked="checked" @change="checked=!checked">综合能力较强</el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="opinionData.agreeBaseOopinion" v-if="scope.row.type == '基本同意理由'" :disabled="isDisabled || opinionData.opinions ==0">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">综合能力一般</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">业绩一般</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">成果一般</el-checkbox>
<el-checkbox label="3" :checked="checked" @change="checked=!checked">论文一般</el-checkbox>
<el-checkbox label="4" :checked="checked" @change="checked=!checked">其他理由</el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="opinionData.noAgreeOopinion" v-if="scope.row.type == '不同意理由'" :disabled="isDisabled || opinionData.opinions ==1">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">综合能力较差</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">业绩较差</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">成果较差</el-checkbox>
<el-checkbox label="3" :checked="checked" @change="checked=!checked">论文较差</el-checkbox>
<el-checkbox label="4" :checked="checked" @change="checked=!checked">岗位差异</el-checkbox>
<el-checkbox label="5" :checked="checked" @change="checked=!checked">业绩不详</el-checkbox>
<el-checkbox label="6" :checked="checked" @change="checked=!checked">成果不详</el-checkbox>
<el-checkbox label="7" :checked="checked" @change="checked=!checked">论文观点错误</el-checkbox>
<el-checkbox label="8" :checked="checked" @change="checked=!checked" >材料虚假</el-checkbox>
<el-checkbox label="9" :checked="checked" @change="checked=!checked">其他理由</el-checkbox>
</el-checkbox-group>
<el-input class="inputStyle" type="textarea" v-if="scope.row.type == '评审意见'" :rows="3" v-model="opinionData.reviewOpinion" :disabled="isDisabled"></el-input>
</template>
</el-table-column>
<el-table-column
label="评价标准"
align="center"
>
<template slot-scope="scope">
<el-radio-group v-model="opinionData.declareAttitude" v-if="scope.row.sheetType == '申报态度评价'" :disabled="isDisabled">
<el-radio label="A">A(好)</el-radio>
<el-radio label="B">B(一般)</el-radio>
<el-radio label="C">C(差)</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.contentEvaluation" v-if="scope.row.sheetType == '内容完整性'" :disabled="isDisabled">
<el-radio label="A">A级</el-radio>
<el-radio label="B">B级</el-radio>
<el-radio label="C">C级</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.writeStandard" v-if="scope.row.sheetType == '填写规范性'" :disabled="isDisabled">
<el-radio label="A">A级</el-radio>
<el-radio label="B">B级</el-radio>
<el-radio label="C">C级</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.ability" v-if="scope.row.sheetType == 'A级标准' && scope.row.type =='能力业绩条件'" :disabled="isDisabled">
<el-radio label="A+">A+</el-radio>
<el-radio label="A">A</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.ability" v-if="scope.row.sheetType == 'B级标准' && scope.row.type =='能力业绩条件'" :disabled="isDisabled">
<el-radio label="B">B</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.ability" v-if="scope.row.sheetType == 'C级标准' && scope.row.type =='能力业绩条件'" :disabled="isDisabled">
<el-radio label="C">C</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.achievement" v-if="scope.row.sheetType == 'A级标准' && scope.row.type =='业绩成果条件'" :disabled="isDisabled">
<el-radio label="A+">A+</el-radio>
<el-radio label="A">A</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.achievement" v-if="scope.row.sheetType == 'B级标准' && scope.row.type =='业绩成果条件'" :disabled="isDisabled">
<el-radio label="B">B</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.achievement" v-if="scope.row.sheetType == 'C级标准' && scope.row.type =='业绩成果条件'" :disabled="isDisabled">
<el-radio label="C">C</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.publications" v-if="scope.row.sheetType == 'A级标准' && scope.row.type =='论文著作条件'" :disabled="isDisabled">
<el-radio label="A+">A+</el-radio>
<el-radio label="A">A</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.publications" v-if="scope.row.sheetType == 'B级标准' && scope.row.type =='论文著作条件'" :disabled="isDisabled">
<el-radio label="B">B</el-radio>
</el-radio-group>
<el-radio-group v-model="opinionData.publications" v-if="scope.row.sheetType == 'C级标准' && scope.row.type =='论文著作条件'" :disabled="isDisabled">
<el-radio label="C">C</el-radio>
</el-radio-group>
</template>
</el-table-column >
<el-table-column
label="评价"
align="center"
width="100"
>
<template slot-scope="scope">
<span v-if="scope.row.sheetType == '申报态度评价'">{{opinionData.declareAttitude}}</span>
<span v-if="scope.row.sheetType == '内容完整性'">{{opinionData.contentEvaluation}}</span>
<span v-if="scope.row.sheetType == '填写规范性'">{{opinionData.writeStandard}}</span>
<span v-if="scope.row.type == '能力业绩条件'">{{opinionData.ability}}</span>
<span v-if="scope.row.type == '业绩成果条件'">{{opinionData.achievement}}</span>
<span v-if="scope.row.type == '论文著作条件'">{{opinionData.publications}}</span>
<span>级</span>
</template>
</el-table-column>
</el-table>
<br/>
<el-row type="flex" justify="center">
<el-button v-if="typeData == 0" v-loading="buttonLoading" type="primary" @click="submitOpinions">保存</el-button>
<el-button v-if="typeData == 1" v-loading="buttonLoading" type="primary" @click="updateOpinions">保存</el-button>
<el-button v-if="typeData == 2" type="primary" @click="returnPage">返回</el-button>
<el-button type="primary" @click="getNextMessage">下一个</el-button>
<el-button type="primary" @click="handleClose">关闭</el-button>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
props:{
opinionData:{
type:Object,
required:true,
},
isDisabled:{
type:Boolean,
default(){
return false;
}
},
typeData:{
type:Number,
default(){
return 0;
}
},
buttonLoading:{
type:Boolean,
default(){
return false;
}
}
},
data() {
return {
rowList: [],
spanArr: [],//返回的是相对应的行合并行数
position: 0,//是数组元素的位置（此时是从数组元素的第一个开始，所以this.position为0）
listData: [],
basicListData:[],
informationData:[],
checked:false,
}
},
watch:{
'opinionData.opinions':function(newValue){
if(newValue == 1){
this.opinionData.noAgreeOopinion =[];
}
else{
this.opinionData.agreeOopinion = [];
this.opinionData.agreeBaseOopinion = [];
}
}
},
methods: {
queryData(){//查询操作
this.informationData = [
{id:1,
name:'姓名',
unitName:'单位职称'
},
{id:2,
name:'年龄',
unitName:'申报人所属专业'
}
];
this.basicListData =[
{
id:1,
type:"基本条件",
sheetType: "1.政治思想条件",
},
{
id:2,
type:"基本条件",
sheetType: "2.1学历条件",
},
{
id:3,
type:"基本条件",
sheetType: "2.2任工程师年限",
},
{
id:4,
type:"基本条件",
sheetType: "3.破格条件",
},
{
id:5,
type:"基本条件",
sheetType: "4.继续教育",
},
];
//this.rowspan(this.basicListData);
this.listData = [
{
id:1,
type:"申报材料印象评分",
sheetType: "内容完整性",
taskKey: "shijian_01",
templateUrl: "级"
},
{
id:2,
type:"申报材料印象评分",
sheetType: "填写规范性",
taskKey: "shijian_02",
templateUrl: "级"
},
{
id:3,
type:"申报材料印象评分",
sheetType: "申报态度评价",
taskKey: "shijian_03",
templateUrl: "级"
},
{
id:4,
type:"能力业绩条件",
sheetType: "A级标准",
taskKey: "wenti_01",
templateUrl: "级"
},
{
id:5,
type:"能力业绩条件",
sheetType: "B级标准",
taskKey: "wenti_02",
templateUrl: "级"
},
{
id:6,
type:"能力业绩条件",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:7,
type:"业绩成果条件",
sheetType: "A级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:8,
type:"业绩成果条件",
sheetType: "B级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:9,
type:"业绩成果条件",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:10,
type:"论文著作条件",
sheetType: "A级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:11,
type:"论文著作条件",
sheetType: "B级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:12,
type:"论文著作条件",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:13,
type:"专家意见",
sheetType: "专家意见",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:14,
type:"同意理由",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:15,
type:"基本同意理由",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:16,
type:"不同意理由",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
{
id:17,
type:"评审意见",
sheetType: "C级标准",
taskKey: "wenti_03",
templateUrl: "级"
},
];
this.rowspan(this.listData); //这个函数就是用来返回 this.spanArr 数组的，定义每一行的 rowspan
},
rowspan(data) {
data.forEach((item,index) => {
if( index === 0){
this.spanArr.push(1);
this.position = 0;
}else{
if(data[index].type === data[index-1].type ){
this.spanArr[this.position] += 1;//合并相同的行
this.spanArr.push(0);//被合并的行消失
}else{
this.spanArr.push(1);//行不相同，则独占一行
this.position = index;//设置数组this.spanArr[this.position]的元素值，然后定义从此行开始向下合并几行
}
}
})
},
spanMethod:function({ row, column, rowIndex, columnIndex }){
if(columnIndex === 0){
if(rowIndex == 0){
return [5,1]
}
else{
return [0,0]
}
}
}
,
objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行，合并列
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 3 && rowIndex > 2 && rowIndex <= 11){
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(rowIndex > 11 && columnIndex == 1 ){
return [1,3];
}
},
//提交评审意见
submitOpinions:function () {
this.$emit('submitOpinions',this.opinionData);
},
//修改评审意见
updateOpinions:function () {
this.$emit('updateOpinions',this.opinionData);
},
//返回
returnPage:function () {
this.$emit('returnPage');
},
//下一个
getNextMessage:function (data) {
this.$emit('getNextMessage',this.opinionData);
},
//取消
handleClose:function () {
this.$emit('handleClose');
}
},
mounted() {
this.queryData();
}
}
</script>
<style lang="scss" scoped>
.el-radio {
font-weight: 500;
line-height: 3;}
.inputStyle{
width:100%;
}
.divPosition{
margin-left:10px;
margin-top: 10px;
width:60%;
}
.borderStyle{
border-top:1px solid black;
border-bottom:1px solid black;
border-right:1px solid black;
}
.divStyle{
height:100%;
}
.colBorderStyle{
border-left:1px solid black;
}
</style>
2 使用el-col或el-row来直接创建（高度不好控制，需固定边框高度才能达到所有el-col高度一致，边框样式重合度高）
未完成效果图:
<template>
<div class="backColor">
<div class="divPosition">
<el-form ref="opinionData" :model="opinionData" label-width="130px">
<el-row :gutter="0" type="flex" justify="center" align="middle" class="borderStyle mHeight">
<el-col :span="4" class="colBorderStyle divStyle">
<el-radio v-model="opinionData.declareType" label="正常申报">正常申报</el-radio></el-col>
<el-col :span="1" class="colBorderStyle divStyle">姓名</el-col>
<el-col :span="4" class="colBorderStyle divStyle"><el-input v-model="opinionData.declareName" class="inputStyle" placeholder="请输入内容"></el-input></el-col>
<el-col :span="3" class="colBorderStyle divStyle">单位职称</el-col>
<el-col :span="8" class="colBorderStyle divStyle"><el-input v-model="opinionData.workUnit" class="inputStyle" placeholder="请输入内容"></el-input></el-col>
<el-col :span="4" class="colBorderStyle divStyle">申报职称专业</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle xlHeight">
<el-col class="colBorderStyle divStyle" :span="4">基本条件</el-col>
<el-col class="colBorderStyle" :span="20">
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="borderStyle">1.政治思想条件</el-col>
<el-col :span="20" class="borderStyle">
<el-checkbox-group v-model="opinionData.politicalThoughtList" :disable="isDisabled">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">单位年审</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">党纪政纪</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">责任事故等</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="borderStyle">2.1学历条件</el-col>
<el-col :span="20" class="borderStyle">
<el-radio-group v-model="opinionData.academic" :disable="isDisabled">
<el-radio :label="0">博士</el-radio>
<el-radio :label="1">硕士</el-radio>
<el-radio :label="2">大学</el-radio>
<el-radio :label="3">大专</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">2.2任工程师年限</el-col>
<el-col :span="20" class="colBorderStyle">
<el-input v-model="opinionData.engineerYears" class="inputStyle" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle" >3.破格条件</el-col>
<el-col :span="20" class="colBorderStyle">
<el-radio-group v-model="opinionData.licenceConditions" :disable="isDisabled">
<el-radio :label="0">具有破格条件</el-radio>
<el-radio :label="1">不具有破格条件</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">4.继续教育</el-col>
<el-col :span="20" class="colBorderStyle">
<el-input v-model="opinionData.education" class="inputStyle" placeholder="总学时=90学时*任现职年限"></el-input>
</el-col>
</el-row>
</el-col>
</el-row >
<el-row :gutter="0" class="borderStyle sHeight">
<el-col :span="4" class="colBorderStyle divStyle">评审项目</el-col>
<el-col :span="20" class="colBorderStyle divStyle">
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">评审细目</el-col>
<el-col :span="16" class="colBorderStyle">评审细目</el-col>
<el-col :span="4" class="colBorderStyle">评价</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle xmHight">
<el-col :span="4" class="colBorderStyle divStyle">申报材料印象评分</el-col>
<el-col :span="20" class="colBorderStyle">
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">内容完整性</el-col>
<el-col :span="16" class="colBorderStyle"><el-radio-group v-model="opinionData.contentEvaluation" :disable="isDisabled">
<el-radio label="A">A级</el-radio>
<el-radio label="B">B级</el-radio>
<el-radio label="C">C级</el-radio>
</el-radio-group></el-col>
<el-col :span="4" class="colBorderStyle">级</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">填写规范性</el-col>
<el-col :span="16" class="colBorderStyle">
<el-radio-group v-model="opinionData.writeStandard" :disable="isDisabled">
<el-radio label="A">A级</el-radio>
<el-radio label="B">B级</el-radio>
<el-radio label="C">C级</el-radio>
</el-radio-group></el-col>
<el-col :span="4" class="colBorderStyle">级</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle">
<el-col :span="4" class="colBorderStyle">申报态度评价</el-col>
<el-col :span="16" class="colBorderStyle">
<el-radio-group v-model="opinionData.declareAttitude" :disable="isDisabled">
<el-radio label="A">A(好)</el-radio>
<el-radio label="B">B(一般)</el-radio>
<el-radio label="C">C(差)</el-radio>
</el-radio-group>
</el-col>
<el-col :span="4" class="colBorderStyle">级</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="0"class="borderStyle sHeight">
<el-col :span="4" class="colBorderStyle divStyle">专业组意见</el-col>
<el-col :span="20" class="colBorderStyle divStyle">
<el-radio-group v-model="opinionData.opinions" :disable="isDisabled">
<el-radio :label="1">同意</el-radio>
<el-radio :label="0">不同意</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle sHeight" v-show="opinionData.opinions == 1">
<el-col :span="4" class="colBorderStyle ">同意理由</el-col>
<el-col :span="20" class="colBorderStyle">
<el-checkbox-group v-model="opinionData.agreeOopinion" :disable="isDisabled">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">综合能力强</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">业绩突出</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">成果突出</el-checkbox>
<el-checkbox label="3" :checked="checked" @change="checked=!checked">学术突出</el-checkbox>
<el-checkbox label="4" :checked="checked" @change="checked=!checked">综合能力较强</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row :gutter="0" class="borderStyle" v-show="opinionData.opinions == 0">
<el-col :span="4" class="colBorderStyle sHeight">不同意理由</el-col>
<el-col :span="20" class="colBorderStyle">
<el-checkbox-group v-model="opinionData.noAgreeOopinion" :disable="isDisabled">
<el-checkbox label="0" :checked="checked" @change="checked=!checked">综合能力较差</el-checkbox>
<el-checkbox label="1" :checked="checked" @change="checked=!checked">业绩较差</el-checkbox>
<el-checkbox label="2" :checked="checked" @change="checked=!checked">成果较差</el-checkbox>
<el-checkbox label="3" :checked="checked" @change="checked=!checked">论文较差</el-checkbox>
<el-checkbox label="4" :checked="checked" @change="checked=!checked">岗位差异</el-checkbox>
<el-checkbox label="5" :checked="checked" @change="checked=!checked">业绩不详</el-checkbox>
<el-checkbox label="6" :checked="checked" @change="checked=!checked">成果不详</el-checkbox>
<el-checkbox label="7" :checked="checked" @change="checked=!checked">论文观点错误</el-checkbox>
<el-checkbox label="8" :checked="checked" @change="checked=!checked" >材料虚假</el-checkbox>
<el-checkbox label="9" :checked="checked" @change="checked=!checked">其他理由</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
<el-row>
<el-button v-if="typeData == 1" v-loading="buttonLoading" type="primary" >保存</el-button>
<el-button type="primary" >下一个</el-button>
<el-button type="primary" >取消</el-button>
</el-row>
</el-form>
</div>
</div>