创建复杂表格

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>

猜你喜欢

转载自blog.csdn.net/qq_39692513/article/details/90641413