【iview】 动态表头动态render函数等实践 VUE

这里的初始请求参数 需要自己解决


请求出来的数据格式是 
[
  {
    "infoId": 1,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0102",
    "candidateName": "张小妹",
    "indicatorId": 7,
    "indicatorName": "4",
    "score": 85,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 2,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0102",
    "candidateName": "张小妹",
    "indicatorId": 8,
    "indicatorName": "11",
    "score": 80,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 3,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0102",
    "candidateName": "张小妹",
    "indicatorId": 9,
    "indicatorName": "12",
    "score": 80,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 4,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0103",
    "candidateName": "董建军",
    "indicatorId": 1,
    "indicatorName": "测试指标1",
    "score": 20,
    "planId": 10,
    "planName": "计划10",
    "projectId": 2,
    "projectName": "测试等级制04-21-14:50",
    "valueScope": "1-100",
    "ruleList": [
      {
        "id": 5,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 100,
        "endValue": 90,
        "markRatio": 10,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 6,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 89,
        "endValue": 79,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 7,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 78,
        "endValue": 60,
        "markRatio": 30,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 8,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 59,
        "endValue": 0,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 5,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0103",
    "candidateName": "董建军",
    "indicatorId": 3,
    "indicatorName": "测试指标333",
    "score": 80,
    "planId": 10,
    "planName": "计划10",
    "projectId": 3,
    "projectName": "测试打分制2 0421-15:38",
    "valueScope": "0-50",
    "ruleList": [
      {
        "id": 15,
        "projectId": 3,
        "gradeName": "等级1",
        "fixationValue": 100,
        "gradeRatio": 10,
        "beginValue": 50,
        "endValue": 41,
        "markRatio": 10,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 16,
        "projectId": 3,
        "gradeName": "等级2",
        "fixationValue": 90,
        "gradeRatio": 10,
        "beginValue": 40,
        "endValue": 31,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 17,
        "projectId": 3,
        "gradeName": "等级3",
        "fixationValue": 80,
        "gradeRatio": 20,
        "beginValue": 30,
        "endValue": 21,
        "markRatio": 30,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 18,
        "projectId": 3,
        "gradeName": "等级4",
        "fixationValue": 70,
        "gradeRatio": 50,
        "beginValue": 20,
        "endValue": 11,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 19,
        "projectId": 3,
        "gradeName": "等级5",
        "fixationValue": 60,
        "gradeRatio": 10,
        "beginValue": 10,
        "endValue": 0,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 6,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0103",
    "candidateName": "董建军",
    "indicatorId": 4,
    "indicatorName": "1",
    "score": 62,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 7,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0104",
    "candidateName": "白新青",
    "indicatorId": 1,
    "indicatorName": "测试指标1",
    "score": 61,
    "planId": 10,
    "planName": "计划10",
    "projectId": 2,
    "projectName": "测试等级制04-21-14:50",
    "valueScope": "1-100",
    "ruleList": [
      {
        "id": 5,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 100,
        "endValue": 90,
        "markRatio": 10,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 6,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 89,
        "endValue": 79,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 7,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 78,
        "endValue": 60,
        "markRatio": 30,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 8,
        "projectId": 2,
        "gradeName": null,
        "fixationValue": null,
        "gradeRatio": null,
        "beginValue": 59,
        "endValue": 0,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 8,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0104",
    "candidateName": "白新青",
    "indicatorId": 4,
    "indicatorName": "1",
    "score": 60,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 9,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0105",
    "candidateName": "袁中宏",
    "indicatorId": 3,
    "indicatorName": "测试指标333",
    "score": 70,
    "planId": 10,
    "planName": "计划10",
    "projectId": 3,
    "projectName": "测试打分制2 0421-15:38",
    "valueScope": "0-50",
    "ruleList": [
      {
        "id": 15,
        "projectId": 3,
        "gradeName": "等级1",
        "fixationValue": 100,
        "gradeRatio": 10,
        "beginValue": 50,
        "endValue": 41,
        "markRatio": 10,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 16,
        "projectId": 3,
        "gradeName": "等级2",
        "fixationValue": 90,
        "gradeRatio": 10,
        "beginValue": 40,
        "endValue": 31,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 17,
        "projectId": 3,
        "gradeName": "等级3",
        "fixationValue": 80,
        "gradeRatio": 20,
        "beginValue": 30,
        "endValue": 21,
        "markRatio": 30,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 18,
        "projectId": 3,
        "gradeName": "等级4",
        "fixationValue": 70,
        "gradeRatio": 50,
        "beginValue": 20,
        "endValue": 11,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      },
      {
        "id": 19,
        "projectId": 3,
        "gradeName": "等级5",
        "fixationValue": 60,
        "gradeRatio": 10,
        "beginValue": 10,
        "endValue": 0,
        "markRatio": 20,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  },
  {
    "infoId": 10,
    "inspectionByname": "0101",
    "inspectionName": "焦红浩",
    "candidateByname": "0105",
    "candidateName": "袁中宏",
    "indicatorId": 4,
    "indicatorName": "1",
    "score": 30,
    "planId": 10,
    "planName": "计划10",
    "projectId": 11,
    "projectName": "测试10",
    "valueScope": "",
    "ruleList": [
      {
        "id": 30,
        "projectId": 11,
        "gradeName": "1",
        "fixationValue": 100,
        "gradeRatio": null,
        "beginValue": null,
        "endValue": null,
        "markRatio": null,
        "deleteTime": null,
        "valueScope": null
      }
    ]
  }
]


页面demo
<template>
  <div class="wapper">
    <div class="table-box">
      <!-- 表头 -->
      <div class="top_title">
        <Button style="height: 24px; font-size: 14px" @click="goBefore"
          >返回</Button
        >
        <p class="title">
          {{ JSON.parse(this.$route.query.params).planName }}
        </p>
        <!-- //此处应为变量 -->
      </div>
      <!-- 表头 -->
      <div class="table-title">
        <!-- 表头左侧 -->
        <div class="table-left">
          <!-- 功能按钮组 可自定义 -->
        </div>
        <!-- 表头右侧 -->
        <div class="table-right">
          <div
            class="filter_box"
            style="padding-top: 5px; margin-right: 5px"
          ></div>
          <!-- 搜索栏 -->
          <div class="table-search"></div>
          <!-- 工具栏 -->
          <div class="table-toolbar"></div>
        </div>
      </div>

      <!-- 表格 -->
      <Table
        :columns="tableCols"
        :data="tableData"
        ref="table"
        border
        min-height="600"
        center
      >
        <template slot-scope="{ row }" slot="operation"> </template>
      </Table>
    </div>

    <!-- 校区新增删除弹出框 -->
  </div>
</template>
<script>
import moment from "moment";
import { selectStatistics, createMark } from "@/api/hr/index.js";
import Vue from "vue";
import { url, storage } from "llm-web-tool";
export default {
  props: ["indicatorObj"],
  data() {
    return {
      // 表格数据
      tableData: [],
      // 表格列数据
      tableCols: [],
      inspectionByname: "",
    };
  },
  methods: {
    // 获取表格数据
    getTableData() {
      let data = [];
      let bynamearr = [];
      let personArr = [];
      let zhibiaoArr = [];
      let xiangmuarr = [];
      selectStatistics({
        planId: JSON.parse(this.$route.query.params).planId,
        inspectionByname: this.inspectionByname,
      })
        .then((res) => {
          this.tableData = [];
          if (res.successNo === 0) {
            console.log(res);
            data = res.data;
            //** 根据人名去重 查出有多少个人**/
            for (let i = 0; i < data.length; i++) {
              // console.log(data[i]);
              if (bynamearr.indexOf(data[i].candidateByname) == -1) {
                bynamearr.push(data[i].candidateByname);
              }
            }
            //         //** 根据人名去重 查出有多少个人**/
            //          //** 根据去重后的人名进行分组**/
            for (let m = 0; m < bynamearr.length; m++) {
              let obj = {};
              obj.arr = [];
              for (let i = 0; i < data.length; i++) {
                if (bynamearr[m] == data[i].candidateByname) {
                  obj.candidateByname = data[i].candidateByname;
                  obj.candidateName = data[i].candidateName;
                  obj.planId = data[i].planId;
                  obj.arr.push(data[i]);
                }
              }
              personArr.push(obj);
            }
            // console.log(personArr)
            //** 根据去重后的人名进行分组**/
            // **对每个人项目进行去重 找出项目项*/
            for (let i = 0; i < personArr.length; i++) {
              for (let m = 0; m < personArr[i].arr.length; m++) {
                // console.log(personArr[i].arr[m].xiangmu);
                if (xiangmuarr.indexOf(personArr[i].arr[m].projectName) == -1) {
                  xiangmuarr.push(personArr[i].arr[m].projectName);
                }
              }
            }
            //**对每个人项目进行去重 找出项目项*/

            //**循环出所有指标项*/
            for (let i = 0; i < data.length; i++) {
              let obj = {
                projectId: data[i].projectId,
                projectName: data[i].projectName,
                indicatorId: data[i].indicatorId,
                indicatorName: data[i].indicatorName,
                projectId: data[i].projectId,
                projectName: data[i].projectName,
                // valueScope: data[i].valueScope,
                ruleList: data[i].ruleList,
                score: "-",
              };
              zhibiaoArr.push(obj);
            }
            console.log(zhibiaoArr);
            //**循环出所有指标项*/
            //**去重保留所有指标项*/
            let quchongZhiBiaoArr = [];
            for (let i = 0; i < zhibiaoArr.length; i++) {
              if (quchongZhiBiaoArr.length == 0) {
                quchongZhiBiaoArr.push(zhibiaoArr[i]);
              } else {
                const pID = [];
                const iID = [];
                for (let m = 0; m < quchongZhiBiaoArr.length; m++) {
                  pID.push(quchongZhiBiaoArr[m].projectId);
                  iID.push(quchongZhiBiaoArr[m].indicatorId);
                }
                if (
                  pID.indexOf(zhibiaoArr[i].projectId) == -1 ||
                  iID.indexOf(zhibiaoArr[i].indicatorId) == -1
                ) {
                  quchongZhiBiaoArr.push(zhibiaoArr[i]);
                }
              }
            }
            // console.log(quchongZhiBiaoArr);
            //**去重保留所有指标项*/
            const pID = [];
            const iID = [];
            for (let m = 0; m < quchongZhiBiaoArr.length; m++) {
              pID.push(quchongZhiBiaoArr[m].projectId);
              iID.push(quchongZhiBiaoArr[m].indicatorId);
            }
            for (let i = 0; i < personArr.length; i++) {
              const pID = [];
              const iID = [];
              for (let m = 0; m < personArr[i].arr.length; m++) {
                pID.push(personArr[i].arr[m].projectId);
                iID.push(personArr[i].arr[m].indicatorId);
              }
              personArr[i].pID = pID;
              personArr[i].iID = iID;
            }

            for (let i = 0; i < personArr.length; i++) {
              for (let m = 0; m < quchongZhiBiaoArr.length; m++) {
                if (
                  personArr[i].pID.indexOf(quchongZhiBiaoArr[m].projectId) ==
                    -1 ||
                  personArr[i].iID.indexOf(quchongZhiBiaoArr[m].indicatorId) ==
                    -1
                ) {
                  personArr[i].arr.push(quchongZhiBiaoArr[m]);
                } else {
                  // console.log(quchongZhiBiaoArr[m].projectId,quchongZhiBiaoArr[m].indicatorId)
                }
              }
            }
            /*给每个人补足指标项*/
            //** */
            for (let i = 0; i < personArr.length; i++) {
              //**/循环每个人 */
              for (let m = 0; m < xiangmuarr.length; m++) {
                //**循环每个人的所有项 */
                let obj = {};
                obj.arr = [];
                for (let v = 0; v < personArr[i].arr.length; v++) {
                  //**循环每个人所有项目*/
                  if (xiangmuarr[m] == personArr[i].arr[v].projectName) {
                    obj.name = personArr[i].arr[v].projectName;
                    obj.arr.push({
                      title: personArr[i].arr[v].indicatorName,
                      zhibiaokey: personArr[i].arr[v].score,
                      ruleList: personArr[i].arr[v].ruleList,
                      valueScope: personArr[i].arr[v].valueScope,
                    });
                    // console.log(obj, "------");
                  }
                }
                let newObj = {};
                newObj.title = obj.name;
                newObj.children = obj.arr;
                // console.log(newObj);
                personArr[i][`${obj.name}`] = newObj; //创建项目新对象  绑定至每个人
              }
            }
            // console.log(personArr);
            // **合成渲染数据 tableCols */  /** 新列表 从这里开始渲染 要注意只渲染项目及指标*/
            let coldata = personArr;
            this.tableCols = [];
            this.tableCols.push({
              title: "姓名",
              key: "candidateName",
              fixed: 'left',
              align: "center",
              width: "100",
            }); //单独拿出来 姓名列
            // console.log(coldata[0]);
            for (let key in coldata[0]) {
              if (
                key == "candidateByname" ||
                key == "candidateName" ||
                key == "iID" ||
                key == "pID" ||
                key == "arr" ||
                key == "planId" ||
                key == "xiangmuarr"
              ) {
                //排除姓名相关参数 不循环   //这里可以考虑替换成判断类型 为对象或数组才进行数据处理
              } else {
                let obj = {};
                obj.children = [];
                // console.log(coldata[0][key])
                obj.title = coldata[0][key].title;
                obj.align = "center";
                for (let i = 0; i < coldata[0][key].children.length; i++) {
                  let str = coldata[0][key].children[i].title; //解决下面没法用变量的问题
                  // console.log(coldata[0][key].children[i].title);
                  let valueStr = `${coldata[0][key].children[i].title}-valueScope`;
                  let ruleList = `${coldata[0][key].children[i].title}-ruleList`;
                  obj.children.push({
                    title: coldata[0][key].children[i].title,
                    // key: `${coldata[0][key].title}-zb${i}`, //如果只是渲染不用render函数 直接用这个
                    align: "center",
                    render: (h, { row, index }) => {
                      //作判断 目前少一层等级制
                      if (this.tableData[index][str] == "-") {
                        return h("span", this.tableData[index][str]);
                      } else {
                        if (this.tableData[index][valueStr] != "") {
                          return h("InputNumber", {
                            props: {
                              value: this.tableData[index][str],
                              max: Number(
                                this.tableData[index][valueStr].split("-")[1]
                              ),
                              min: Number(
                                this.tableData[index][valueStr].split("-")[0]
                              ),
                            },
                            on: {
                              "on-change": (event) => {
                                this.tableData[index][str] = event;
                              },
                              "on-blur": (value) => {
                                console.log(this.tableData[index][str]);
                                // this.tableData[index][str] = value;
                                let obj = {};
                                obj.planId = this.tableData[index].planId;
                                obj.score = this.tableData[index][str];
                                for (
                                  let i = 0;
                                  i < this.tableData[index].arr.length;
                                  i++
                                ) {
                                  if (
                                    this.tableData[index].arr[i]
                                      .indicatorName == str
                                  ) {
                                    obj.indicatorId = this.tableData[index].arr[
                                      i
                                    ].indicatorId;
                                    obj.candidateByname = this.tableData[index].arr[
                                      i
                                    ].candidateByname;
                                  }
                                }
                                console.log(obj);
                                createMark({inspectionByname:this.inspectionByname,candidateByname:obj.candidateByname,indicatorId:obj.indicatorId,planId:obj.planId,score:obj.score}).then(res=>{
                                  console.log(res)
                                  if(res.successNo ==0){
                                    this.$Message.success('成功')
                                    this.getTableData()
                                  }else{
                                    this.$Message.error(res.successMsg)
                                  }
                                });
                              },
                            },
                          });
                        } else {
                          return h(
                            "Select",
                            {
                              props: {
                                value: this.tableData[index][str],
                                transfer: true,
                              },
                              style: {
                                width: "100px",
                                zIndex: "10000",
                              },
                              on: {
                                // 绑定on-change事件让数据实时更新
                                "on-change": (value) => {
                                  this.tableData[index][str] = value;
                                  let obj = {};
                                  obj.planId = this.tableData[index].planId;
                                  obj.score = this.tableData[index][str];
                                  for (
                                    let i = 0;
                                    i < this.tableData[index].arr.length;
                                    i++
                                  ) {
                                    if (
                                      this.tableData[index].arr[i]
                                        .indicatorName == str
                                    ) {
                                      obj.indicatorId = this.tableData[
                                        index
                                      ].arr[i].indicatorId;
                                      obj.candidateByname = this.tableData[index].arr[
                                      i
                                    ].candidateByname;
                                    }
                                  }
                                  console.log(obj);
                                  createMark({inspectionByname:this.inspectionByname,candidateByname:obj.candidateByname,indicatorId:obj.indicatorId,planId:obj.planId,score:obj.score}).then(res=>{
                                  console.log(res)
                                  if(res.successNo ==0){
                                    this.$Message.success('成功')
                                    this.getTableData()
                                  }else{
                                    this.$Message.error(res.successMsg)
                                  }
                                });
                                },
                              },
                            },
                            this.tableData[index][ruleList].map(function (
                              type
                            ) {
                              return h("Option", {
                                props: {
                                  value: type.fixationValue,
                                  label: type.gradeName,
                                },
                                style: {
                                  width: "100px",
                                  zIndex: "10000",
                                },
                              });
                            })
                          );
                        }
                      }
                    },
                  });
                }
                this.tableCols.push(obj);
              }
            }
            // // **合成渲染数据 tableCols */
            // // 到此为止还差将数据渲染到页面上  记得把条件等东西也放上去
            // //**这里处理渲染数据 复制tabledata */
            for (let i = 0; i < personArr.length; i++) {
              for (let key in personArr[i]) {
                if (
                  key == "candidateByname" ||
                  key == "candidateName" ||
                  key == "iID" ||
                  key == "pID" ||
                  key == "arr" ||
                  key == "planId" ||
                  key == "xiangmuarr"
                ) {
                  // console.log(personArr[i][key])
                } else {
                  let obj = {};
                  // console.log(personArr[i][key].children);
                  for (let m = 0; m < personArr[i][key].children.length; m++) {
                    personArr[i][`${personArr[i][key].children[m].title}`] =
                      personArr[i][key].children[m].zhibiaokey;
                    personArr[i][
                      `${personArr[i][key].children[m].title}-ruleList`
                    ] = personArr[i][key].children[m].ruleList;
                    personArr[i][
                      `${personArr[i][key].children[m].title}-valueScope`
                    ] = personArr[i][key].children[m].valueScope;
                  }
                }
              }
            }
            console.log(personArr, "------");
            this.tableData = personArr;
          }
        })
        .catch((err) => {
          this.$Message.error("服务器异常，请稍后再试");
        });
    },
    //回上一个页面
    goBefore() {
      this.$router.go(-1);
    },
  },
  created() {},
  mounted() {
    this.inspectionByname = storage.local.get("sign_key");
    this.getTableData(); //查询表格数据
    // console.log(JSON.parse(this.$route.query.params));
  },
};
</script>
<style scoped lang="less">
.wapper {
  padding: 10px;
}
.table-title {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.table-right {
  display: flex;
}
.table-toolbar > div {
  margin: 0 5px;
}
.table-search {
  margin-right: 10px;
}
.btnInfo {
  min-height: 600px;
  border: 1px solid #ccc;
}
.table-page {
  display: flex;
  padding: 10px 0;
  justify-content: center;
}
.filter_box > div {
  margin-right: 5px;
}
.top_title {
  padding: 0 0 15px 0;
  border-bottom: 1px solid #ececec;
  position: relative;
  .title {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #444444;
    font-weight: bold;
  }
}
.xrDetail {
  width: 98%;
  height: 600px;
  border: 1px solid #ccc;
}
</style>
<style>
</style>