vue +elementui 元素周期表可选择可禁用

我爱磕CP .

已于 2025-04-14 16:08:26 修改

阅读量227

点赞数 5

文章标签： vue.js elementui 前端

于 2025-04-14 15:41:31 首次发布

本文链接：https://blog.csdn.net/weixin_43787161/article/details/147224584

版权

在这里插入图片描述

html

<template>
  <div>
    <el-dialog
      title="元素周期表"
      :visible.sync="showElement"
      width="1100px"
      :before-close="outHideEleTable"
      :close-on-click-modal="false"
      :modal="false"
      v-el-drag-dialog
    >
      <div
        style="
          color: #000000;
          font-weight: 600;
          text-align: center;
          margin-bottom: 10px;
        "
      >
        {{ elesSelectArrname }}
      </div>
      <div class="eleCount">
        <div>非金属元素</div>
        <div>金属元素</div>
        <div>过度元素</div>
        <div>稀有气体元素</div>
        <el-button
          size="small"
          class="otherZbtn"
          type="primary"
          @click="saveElesTable()"
          >保 存</el-button
        >
        <el-button size="small" type="danger" @click="resetElesTable()"
          >置 空</el-button
        >
      </div>
      <el-table
        :data="tableElementData"
        class="eleTable"
        size="mini"
        style="width: 100%; border-collapse: collapse"
        :cell-style="cellStyle"
        :show-header="false"
        @cell-click="handleCellClick"
      >
        <el-table-column prop="tit1" label="1" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit1"
              :class="scope.row.tit1.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit1.isOpen" class="el-icon-success"></i>
              <div class="eleTop">
                {{ scope.row.tit1.englishName }}
              </div>
              <div class="eleBottom">
                {{ scope.row.tit1.chineseName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit2" label="2" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit2"
              :class="scope.row.tit2.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit2.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit2.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit2.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit3" label="3" min-width="80" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit3"
              :class="scope.row.tit3.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit3.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit3.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit3.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit4" label="4" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit4"
              :class="scope.row.tit4.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit4.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit4.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit4.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit5" label="5" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit5"
              :class="scope.row.tit5.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit5.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit5.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit5.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit6" label="6" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit6"
              :class="scope.row.tit6.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit6.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit6.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit6.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit7" label="7" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit7"
              :class="scope.row.tit7.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit7.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit7.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit7.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit8" label="8" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit8"
              :class="scope.row.tit8.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit8.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit8.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit8.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit9" label="9" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit9"
              :class="scope.row.tit9.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit9.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit9.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit9.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit10" label="10" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit10"
              :class="scope.row.tit10.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit10.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit10.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit10.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit11" label="11" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit11"
              :class="scope.row.tit11.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit11.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit11.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit11.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit12" label="12" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit12"
              :class="scope.row.tit12.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit12.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit12.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit12.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit13" label="13" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit13"
              :class="scope.row.tit13.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit13.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit13.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit13.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit14" label="14" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit14"
              :class="scope.row.tit14.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit14.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit14.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit14.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit15" label="15" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit15"
              :class="scope.row.tit15.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit15.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit15.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit15.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit16" label="16" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit16"
              :class="scope.row.tit16.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit16.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit16.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit16.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit17" label="17" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit17"
              :class="scope.row.tit17.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit17.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit17.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit17.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit18" label="18" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit18"
              :class="scope.row.tit18.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit18.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit18.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit18.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableElementDatatwo"
        class="eleTable"
        size="mini"
        style="width: 100%; margin-top: 15px"
        :cell-style="cellStyle"
        :show-header="false"
        @cell-click="handleCellTwoClick"
      >
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序"
          width="50"
        >
          <template slot-scope="scope">
            <span class="eleBottom">{{ scope.row.tit1.eleType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tit1" label="1" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit1"
              :class="scope.row.tit1.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit1.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit1.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit1.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit2" label="2" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit2"
              :class="scope.row.tit2.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit2.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit2.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit2.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit3" label="3" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit3"
              :class="scope.row.tit3.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit3.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit3.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit3.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit4" label="4" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit4"
              :class="scope.row.tit4.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit4.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit4.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit4.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit5" label="5" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit5"
              :class="scope.row.tit5.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit5.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit5.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit5.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit6" label="6" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit6"
              :class="scope.row.tit6.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit6.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit6.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit6.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit7" label="7" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit7"
              :class="scope.row.tit7.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit7.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit7.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit7.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit8" label="8" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit8"
              :class="scope.row.tit8.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit8.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit8.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit8.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit9" label="9" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit9"
              :class="scope.row.tit9.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit9.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit9.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit9.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit10" label="10" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit10"
              :class="scope.row.tit10.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit10.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit10.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit10.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit11" label="11" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit11"
              :class="scope.row.tit11.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit11.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit11.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit11.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit12" label="12" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit12"
              :class="scope.row.tit12.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit12.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit12.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit12.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit13" label="13" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit13"
              :class="scope.row.tit13.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit13.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit13.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit13.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit14" label="14" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit14"
              :class="scope.row.tit14.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit14.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit14.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit14.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tit15" label="15" min-width="55" align="center">
          <template slot-scope="scope">
            <div
              v-if="scope.row.tit15"
              :class="scope.row.tit15.isOpen ? 'selectEle' : ''"
            >
              <i v-if="scope.row.tit15.isOpen" class="el-icon-success"></i>
              <div class="eleTop">{{ scope.row.tit15.englishName }}</div>
              <div class="eleBottom">{{ scope.row.tit15.chineseName }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

js

<script>
export default {
  name: "element",
  components: {},
  computed: {
    elesSelectArrname() {
      let arr = [];
      for (let i in this.elesSelectArr) {
        this.elementIdsList.find((item) => {
          if (item.id === this.elesSelectArr[i]) {
            arr.push(item.englishName);
          }
        });
      }
      return arr.join("、");
    },
  },
  data() {
    return {
      showElement: false,
      loading: false,
      isdisabled: false, //防止确认二次点击
      elementIdsList: [], // 元素周期列表
      tableElementData: [], // 元素周期列表
      tableElementDatatwo: [], // 元素周期列表
      elesRow: {}, // 选择元素周期表时，当前行
      elesSelectArr: [],
    };
  },
  created() {},
  methods: {
    // 获取下拉框
    async eleInit(elesSelectArr) {
      this.showElement = true;
      this.elesSelectArr = elesSelectArr;
      // 元素周期表
      this.elementIdsList = [
       {
       chineseName:"氢",
       color:"#c2e37b",
       eleType:"",
       englishName:"H",
       id:1,
       isClose:"0", // 是否禁用 0 否，1 是
       type:"稀有气体元素",}
       ];
       this.setElesVal(JSON.parse(JSON.stringify(this.elementIdsList)));
    
    },
    //元素周期表赋值
    setElesVal(elementIdsList) {
      // 表格选中
      if (this.elesSelectArr.length) {
        for (let i in elementIdsList) {
          if (this.elesSelectArr.indexOf(elementIdsList[i].id) != -1) {
            elementIdsList[i].isOpen = "1";
          }
        }
      }
      this.tableElementData = [
        {
          index: 0,
          tit1: elementIdsList[0],
          tit18: elementIdsList[1],
        },
        {
          index: 1,
          tit1: elementIdsList[2],
          tit2: elementIdsList[3],
          tit13: elementIdsList[4],
          tit14: elementIdsList[5],
          tit15: elementIdsList[6],
          tit16: elementIdsList[7],
          tit17: elementIdsList[8],
          tit18: elementIdsList[9],
        },
        {
          index: 2,
          tit1: elementIdsList[10],
          tit2: elementIdsList[11],
          tit13: elementIdsList[12],
          tit14: elementIdsList[13],
          tit15: elementIdsList[14],
          tit16: elementIdsList[15],
          tit17: elementIdsList[16],
          tit18: elementIdsList[17],
        },
        {
          index: 3,
          tit1: elementIdsList[18],
          tit2: elementIdsList[19],
          tit3: elementIdsList[20],
          tit4: elementIdsList[21],
          tit5: elementIdsList[22],
          tit6: elementIdsList[23],
          tit7: elementIdsList[24],
          tit8: elementIdsList[25],
          tit9: elementIdsList[26],
          tit10: elementIdsList[27],
          tit11: elementIdsList[28],
          tit12: elementIdsList[29],
          tit13: elementIdsList[30],
          tit14: elementIdsList[31],
          tit15: elementIdsList[32],
          tit16: elementIdsList[33],
          tit17: elementIdsList[34],
          tit18: elementIdsList[35],
        },
        {
          index: 4,
          tit1: elementIdsList[36],
          tit2: elementIdsList[37],
          tit3: elementIdsList[38],
          tit4: elementIdsList[39],
          tit5: elementIdsList[40],
          tit6: elementIdsList[41],
          tit7: elementIdsList[42],
          tit8: elementIdsList[43],
          tit9: elementIdsList[44],
          tit10: elementIdsList[45],
          tit11: elementIdsList[46],
          tit12: elementIdsList[47],
          tit13: elementIdsList[48],
          tit14: elementIdsList[49],
          tit15: elementIdsList[50],
          tit16: elementIdsList[51],
          tit17: elementIdsList[52],
          tit18: elementIdsList[53],
        },
        {
          index: 5,
          tit1: elementIdsList[54],
          tit2: elementIdsList[55],
          tit3: {
            // this.elementIdsList[56]
            // this.elementIdsList[70]
            id: "",
            chineseName: elementIdsList[56].eleType,
            englishName:
              elementIdsList[56].englishName +
              "~" +
              elementIdsList[70].englishName,
            eleType: elementIdsList[56].eleType,
            isClose: "1",
            type: elementIdsList[56].type,
            color: elementIdsList[56].color,
          },
          tit4: elementIdsList[71],
          tit5: elementIdsList[72],
          tit6: elementIdsList[73],
          tit7: elementIdsList[74],
          tit8: elementIdsList[75],
          tit9: elementIdsList[76],
          tit10: elementIdsList[77],
          tit11: elementIdsList[78],
          tit12: elementIdsList[79],
          tit13: elementIdsList[80],
          tit14: elementIdsList[81],
          tit15: elementIdsList[82],
          tit16: elementIdsList[83],
          tit17: elementIdsList[84],
          tit18: elementIdsList[85],
        },
        {
          index: 6,
          tit1: elementIdsList[86],
          tit2: elementIdsList[87],
          tit3: {
            // this.elementIdsList[88]
            // this.elementIdsList[102]
            id: "",
            chineseName: elementIdsList[88].eleType,
            englishName:
              elementIdsList[88].englishName +
              "~" +
              elementIdsList[102].englishName,
            eleType: elementIdsList[88].eleType,
            isClose: "1",
            type: elementIdsList[88].type,
            color: elementIdsList[88].color,
          },
          tit4: elementIdsList[103],
          tit5: elementIdsList[104],
          tit6: elementIdsList[105],
          tit7: elementIdsList[106],
          tit8: elementIdsList[107],
          tit9: elementIdsList[108],
          tit10: elementIdsList[109],
          tit11: elementIdsList[110],
          tit12: elementIdsList[111],
          tit13: elementIdsList[112],
          tit14: elementIdsList[113],
          tit15: elementIdsList[114],
          tit16: elementIdsList[115],
          tit17: elementIdsList[116],
          tit18: elementIdsList[117],
        },
      ];
      this.tableElementDatatwo = [
        {
          index: 0,
          tit1: elementIdsList[56],
          tit2: elementIdsList[57],
          tit3: elementIdsList[58],
          tit4: elementIdsList[59],
          tit5: elementIdsList[60],
          tit6: elementIdsList[61],
          tit7: elementIdsList[62],
          tit8: elementIdsList[63],
          tit9: elementIdsList[64],
          tit10: elementIdsList[65],
          tit11: elementIdsList[66],
          tit12: elementIdsList[67],
          tit13: elementIdsList[68],
          tit14: elementIdsList[69],
          tit15: elementIdsList[70],
        },
        {
          index: 1,
          tit1: elementIdsList[88],
          tit2: elementIdsList[89],
          tit3: elementIdsList[90],
          tit4: elementIdsList[91],
          tit5: elementIdsList[92],
          tit6: elementIdsList[93],
          tit7: elementIdsList[94],
          tit8: elementIdsList[95],
          tit9: elementIdsList[96],
          tit10: elementIdsList[97],
          tit11: elementIdsList[98],
          tit12: elementIdsList[99],
          tit13: elementIdsList[100],
          tit14: elementIdsList[101],
          tit15: elementIdsList[102],
        },
      ];
    },
    // 元素周期表表格单元格背景色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // c2e37b 非金属元素
      // fcebb8 - border:#e06a6a 过渡元素
      // fcebb8 金属元素
      // b9f1fe 稀有气体元素
      // transparent 空白
      let color = "transparent";
      let bordercolor = "transparent";
      let cursor = "default";
      if (row[column.property] != undefined) {
        color = row[column.property].color;
        bordercolor = "#e8eaec";
        if (row[column.property].type == "过渡元素") {
          bordercolor = "#e06a6a";
        }
        if (row[column.property].color == "") {
          color = "#fefcee";
        }
        if (row[column.property].isClose == 1) {
          cursor = "not-allowed";
        } else if (row[column.property].isClose == 0) {
          cursor = "pointer";
        }
      }
      let obj = {
        backgroundColor: color,
        border: "1px solid " + bordercolor,
        cursor: cursor,
      };
      // 根据需要设置条件
      return obj; // 你想要的背景色
    },
    // 元素周期表表格选中
    handleCellClick(row, column, cell, event) {
      // console.log("点击了单元格:", row[column.property]);
      // 存在id 并且isClose为开启状态，并且没有被选中的元素
      if (
        row[column.property] &&
        row[column.property].id &&
        row[column.property].isClose != 1
      ) {
        // console.log("点击了单元格:", row[column.property].id);
        let elesIndex = this.elesSelectArr.indexOf(row[column.property].id);
        if (elesIndex == -1) {
          this.elesSelectArr.push(row[column.property].id);
          row[column.property].isOpen = "1";
          this.$set(this.tableElementData, row.index, row);
        } else {
          this.elesSelectArr.splice(elesIndex, 1);
          row[column.property].isOpen = "";
          this.$set(this.tableElementData, row.index, row);
        }
      }
    },
    handleCellTwoClick(row, column, cell, event) {
      // console.log("点击了单元格:", row[column.property]);
      // 存在id 并且isClose为开启状态，并且没有被选中的元素
      if (
        row[column.property] &&
        row[column.property].id &&
        row[column.property].isClose != 1
      ) {
        // console.log("点击了单元格:", row[column.property].id);
        let elesIndex = this.elesSelectArr.indexOf(row[column.property].id);
        if (elesIndex == -1) {
          this.elesSelectArr.push(row[column.property].id);
          row[column.property].isOpen = "1";
          this.$set(this.tableElementDatatwo, row.index, row);
        } else {
          this.elesSelectArr.splice(elesIndex, 1);
          row[column.property].isOpen = "";
          this.$set(this.tableElementDatatwo, row.index, row);
        }
      }
    },
    //元素周期表表格保存
    saveElesTable() {
      // if (this.elesSelectArr.length) {
      console.log("选择的元素：", this.elesSelectArr);
      let newArr = this.elesSelectArr.filter(function (value) {
        return value !== 0;
      });
      this.$emit("savesaveEelement", newArr);
      this.showElement = false;
      // } else {
      //   this.$message.info("请选择元素！");
      // }
    },
    // 元素周期表表格置空
    async resetElesTable() {
      this.elesSelectArr = [];
      await this.setElesVal(JSON.parse(JSON.stringify(this.elementIdsList)));
    },
    //关闭弹窗
    outHideEleTable(done) {
      done();
    },
  },
};
</script>

css

<style lang="scss" scoped>
.eleCount {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  div {
    width: 90px;
    text-align: center;
    border: 1px solid #999;
    line-height: 32px;
    margin-right: 5px;
    font-weight: 600;
  }
  div:nth-child(1) {
    background: #c2e37b;
  }
  div:nth-child(2) {
    background: #fcebb8;
  }
  div:nth-child(3) {
    background: #fcebb8;
    border: 1px solid red;
  }
  div:nth-child(4) {
    background: #b9f1fe;
  }
}
.eleTable {
  .selectEle {
    position: relative;
    // color: #035CA0;
    color: red;
    i {
      position: absolute;
      right: -8px;
      top: 2px;
    }
  }
  .eleTop {
    font-size: 18px;
    font-weight: 900;
  }
  .eleBottom {
    font-size: 14px;
    font-weight: 900;
  }
}
::v-deep.el-table--mini .el-table__cell {
  padding: 2px 0 !important;
}
</style>