1.表单模板

 <el-form ref="ruleForm" :model="ruleForm" label-width="150px" style="background: #fff; padding: 20px 20px 0 20px;font-weight:400;" :rules="ruleFormRules" class="specialDeal">
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务标题：" prop="taskId">
          <!-- 选择下拉框 -->
            <el-select v-model="ruleForm.taskId" style="width: 100%" placeholder="" >
              <el-option v-for="item in taskIdList" :key="item.value" :label="item.name" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目单位：">
          <!-- 树形选择 -->
            <el-popover placement="bottom-start" trigger="click">
              <el-input slot="reference" v-model="ruleForm.officeName" clearable @change="changeOfficeName"></el-input>
              <el-tree class="filter-tree" :data="treeData" :props="defaultProps" ref="popoverTree" :highlight-current="true" @node-click="officeIdHandleNodeClick">
              </el-tree>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="得分：" prop="reviewNumber">
          <!-- 输入框-->
            <el-input v-model="ruleForm.reviewNumber">
              <span slot="suffix" style="margin-right: 20px">以上</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-form-item>
            <el-button size="small" type="primary" @click="clickQuery">查询</el-button>
            <el-button size="small" @click="clickReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    var expectedGrossMargin = (rule, value, callback) => {
      console.log("value", value);
      if (value === "" || value == null) {
        callback(new Error("请输入"));//必填
      } else if (!/^([1-9]\d?|100)$/.test(value)) {
        callback(new Error("请输入1到100的整数"));
      } else {
        callback();
      }
    };
    // /(^(\d|[1-9]\d)(\.\d{1})?$)|(^100$)/
    var scoreNumber = (rule, value, callback) => {
      console.log("value", value);
      if (value === "" || value == null) {
        callback();//非必填
      } else if (!/(^(\d|[1-9]\d)(\.\d{1})?$)|(^100$)/.test(value)) {
        callback(new Error("请输入100以内的数字，可保留1位小数"));
      } else {
        callback();
      }
    };
return {
   ruleForm: {
        officeName: "",
        secCode: "",
   }, //查询表单 查询数据
   ruleFormRules: {
        reviewNumber: [{ validator: scoreNumber, required: false, trigger: "blur" },]
   },
}

// 查询
    clickQuery() {
      this.pageNum = 1;
      this.projectSelectionQuery();
    },
    // 重置
    clickReset() {
      this.$refs.ruleForm.resetFields();
      this.ruleForm = {
        taskId: "",
        officeId: "",
        officeName: "",
        secCode: "",
      };
      this.clickQuery();
    },
    projectSelectionQuery(){},//查询接口

2.表格模板

2.1多选

<el-table :data="tableData" height="500" style="width: 100%" :header-cell-style="{ background: 'rgb(242, 242, 242)' }" center border highlight-current-row @select="tableDataSelect" @select-all="tableDataSelectAll" @sort-change="changeSort">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
        <el-table-column label="序号" width="50px" align="center">
        <!-- 此操作时将序号进行连接-->
              <template slot-scope="scope">
                {{( pageNum -1 )* pageSize +scope.$index +1}}
              </template>
         </el-table-column>
        <el-table-column prop="name" label="项目名称" :show-overflow-tooltip="true" align="letf" width="480">
          <template slot-scope="scope">
            <div style="color:#409EFF;cursor:pointer;white-space: nowrap;text-overflow: ellipsis;display:inline-block;margin-right:8px;" >{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="riskName" label="风险名称" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
                <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >{{scope.row.riskName}}</div>
            </template>
          </el-table-column>
        <el-table-column prop="secName" label="二级单位" :show-overflow-tooltip="true" sortable="custom" align="center"> </el-table-column>
        <!-- 将表头列表进行循环，prop为表头对应的英文字段，label为表头展示的中文字段-->
        <el-table-column v-for="item in tableCol" :key="item.id" :prop="item.id" :label="item.name" :show-overflow-tooltip="true" align="center" >
            <template slot-scope="scope">
            <!--scope.row为当前行的数据，找到 与prop匹配的值进行展示-->
              <span style="cursor:pointer;color:#409EFF;" @click="postScore(scope.row)">{{scope.row.postScoreMap?scope.row.postScoreMap[item.id]:""}}</span>
            </template>
         </el-table-column>
  
      </el-table>
      <div class="pageNameClass">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-right: 10px" :page-size="pageSize" :current-page="pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>

      tableData: [
      {name:"",secName:"",postScoreMap:{"1111111":"张三"},}
      ], //查询到得数据   表格展示部分
      tableCol:[
      {id:"1111111",name:"姓名"},
      ],//表头
      pageNum: 1, //表格展示部分   当前第几页
      pageSize: 10, //表格展示部分   每页展示多少条数据
      total: 0, //表格展示部分  总共多少条数据
      selectList: [], //列表勾选项

   // 选择表格
    tableDataSelect(e) {
      console.log("选择表格", e);
      this.selectList = e;
    },
    // 全选表格
    tableDataSelectAll(e) {
      console.log("全选表格", e);
      this.selectList = e;
    },
    
    //分页器改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.projectSelectionQuery();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.projectSelectionQuery();
    },
    //排序
    changeSort(val) {
      console.log("val.column.property", val.column.property, val.order);
      if (val.column.property == "secName") {
        this.ruleForm.orderField = "secSort";
      } else {
        this.ruleForm.orderField = val.column.property;
      }
      if (val.order == "ascending") {
        this.ruleForm.orderType = "ASC";
      } else if (val.order == "descending") {
        this.ruleForm.orderType = "DESC";
      } else {
        delete this.ruleForm.orderType;
        delete this.ruleForm.orderField;
      }
      this.projectSelectionQuery();
    },

2.2单选

<el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-radio :label="scope.$index" v-model="currentRow" @change.native="getCurrentRow(scope.row)" style="color: transparent; ">&nbsp;&nbsp;&nbsp;&nbsp;{{""}}</el-radio>
          </template>
        </el-table-column>

radioData:{},
currentRow:"",

getCurrentRow(val) {
      this.radioData = val;
      console.log("vvvvvvvv",this.radioData)
    },