el-table有关总结与table内滚动条样式

遇到这样一个需求，表格的表头是不固定的，请求回来的数据，名称可以进行编辑，后面的一些可以进行勾选，如下图

 

双击可以进行模型名称的编辑，点击单元格可以进行单元格选择与取消

  <el-table
      border
      :data="modelDaList"
      :cell-style="tableCellStyle"
      header-cell-style="border-color: #7cc3ff;"
      class="tab_class"
      @cell-click="cellClick"
      @select="selectionList"
      @select-all="selectAllList"
      :max-height="scollHeight"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="模型">
        <template #default="scope">
          <el-input size="mini" v-if="scope.$index===clounmedit" v-model="scope.row.name" style="caret-color: #333333"></el-input>
          <div v-else @dblclick="editMode(scope)">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="办案卡" prop="cardDo" v-if="!isEdit"></el-table-column>
      <el-table-column label="可疑卡" prop="cardNO" v-if="!isEdit"></el-table-column>
      <el-table-column v-for="(item,index) in tableNameList" :key="index" :label="item.value" align="center">
        <template #default="scope">
          <img style="height: 2.407vh"
            v-if="scope.row.technical[index]==item.key"
            src="../../assets/yulinfanzha/rightGou.png"
          />
          <div v-else></div>
        </template>
      </el-table-column>
    </el-table>

<script>
import {toRefs, reactive, getCurrentInstance, onMounted} from "vue";

export default {
  name: "tableComp",
  props: {
    modelDaList: Array,
    isEdit:Boolean,
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      tableData.getTableTitle()
    });
    const tableData = reactive({
      editList:false,
      clounmedit:-1,
      scollHeight:document.body.clientHeight * (38.056/ 100),//38.056
      tableNameList:[
          {key: 1, value: '日余额中位数小于50'},
          {key: 2, value: '试探性交易'},
          {key: 3, value: '集中转入分散转出'},
          {key: 4, value: '分散转入集中转出'},
          {key: 5, value: '集中转入集中转出'},
          {key: 6, value: '分散转入分散转出'},
          {key: 7, value: '快进快出'},
          {key: 8, value: '一人多笔转入'},
      ],
      tableCellStyle({ row,column, columnIndex }) {
        if(row.technical[columnIndex-2]&&column.no>1){
          return "background:rgba(191, 222, 255,0.47);border-color: #7cc3ff;";
        }else{
          return "border-color: #7cc3ff;";
        }
      },
      editMode(scope){
        if(props.isEdit){
          //可以对名称进行编辑
          tableData.editList=true
          tableData.clounmedit=scope.$index
        }
      },
      cellClick(row, column){
        if(props.isEdit){
          if(row.technical[column.no-2]){
            row.technical[column.no-2]=''
          }else{
            row.technical[column.no-2]=column.no-1
          }
        }
      },
    });
    return {
      ...toRefs(tableData),
    };
  },
};
</script>

<style>
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
  background-color: transparent;
  border-radius: 5px;
}
/* 滚动条滑块(竖向:vertical 横向:horizontal) */
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: #b1b1b1;
}
/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
  display: block; /* 修复交汇时出现的白块 */
}
</style>

 modelDaList是这样的数据

modelDaList:[{
  name:'A模型',tentativDeal:['1','2','3','','5','','7',''],
},{
  name:'B模型',tentativDeal:['','2','','','5','','7',''],
},{
  name:'C模型',tentativDeal:['','2','3','','5','','7',''],
},{
  name:'E模型',tentativDeal:['1','2','3','','5','','7',''],
},{
  name:'F模型',tentativDeal:['1','2','','','5','','',''],
},{
  name:'G模型',tentativDeal:['1','2','3','','5','','7',''],
},{
  name:'H模型',tentativDeal:['1','','3','','5','','7',''],
},{
  name:'I模型',tentativDeal:['1','2','','','5','','7',''],
},{
  name:'J模型',tentativDeal:['1','2','3','4','','','7',''],
},],