可编辑表格

<template>
  <div>
    <div class="table-wrap">
      <div class="title-wrap">
        <span>{{ name }}</span>
        <span @mouseenter="changeFlag" @mouseleave="changeFlag">
          <img src="../../../assets/img/user/问题.png" alt="">
        </span>
      </div>
      <vxe-table :data="tableData" height="auto" border align="center" :edit-config="{ trigger: 'click', mode: 'cell' }">
        <vxe-column field="unit" width="140">
          <template #header #default="{ row }">
            <div class="first-col">
              <div class="first-col-top">单位mm</div>
              <div class="first-col-bottom">{{ titleName }}</div>
            </div>
          </template>
        </vxe-column>
        <vxe-column v-if="name != '雪灾'" field="fourLevel" :edit-render="{}">
          <template #header>
            <div class="block">
              <span :class="['block-wrap', 'four-wrap']"></span>
              <span>四级风险</span>
            </div>
          </template>
          <template #default="{ row }">
            <span v-if="row.unit != '降雨'" class="edit-block">{{ row.fourLevel }}</span>
            <span v-if="row.unit == '降雨'">
              <vxe-switch v-model="row.fourLevel">
              </vxe-switch>
              <span v-if="row.fourLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-if="row.unit != '降雨'" v-model="row.fourLevel" type="text" placeholder=""></vxe-input>
            <span v-if="row.unit == '降雨'">
              <vxe-switch v-model="row.fourLevel" active-color="#4EBCFF" inactive-color="#6279AA">
              </vxe-switch>
              <span v-if="row.fourLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
          </template>
        </vxe-column>
        <vxe-column field="threeLevel" :edit-render="{}">
          <template #header>
            <div class="block">
              <span :class="['block-wrap', 'three-wrap']"></span>
              <span>三级风险</span>
            </div>
          </template>
          <template #default="{ row }">
            <span v-if="row.unit != '实况降雪' && row.unit != '降雪量' && row.unit != '降雨'" class="edit-block">{{ row.threeLevel
            }}</span>
            <!-- 实况降雪 -->
            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.threeLevel">
              </vxe-switch>
              <span v-if="row.threeLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
            <!-- -降雪量 -->
            <span v-if="row.unit == '降雪量'">
              24h降雪：
              <span class="edit-block">
                {{ row.threeLevel }}
              </span>
            </span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-if="row.unit != '实况降雪' && row.unit != '降雨'" v-model="row.threeLevel" type="text"
              placeholder=""></vxe-input>
            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.threeLevel">
              </vxe-switch>
              <span v-if="row.threeLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
          </template>
        </vxe-column>
        <vxe-column field="twoLevel" :edit-render="{}">
          <template #header>
            <div class="block">
              <span :class="['block-wrap', 'two-wrap']"></span>
              <span>二级风险</span>
            </div>
          </template>
          <template #default="{ row }">
            <span v-if="row.unit != '实况降雪' && row.unit != '降雪量' && row.unit != '降雨'" class="edit-block">{{ row.twoLevel
            }}</span>
            <!-- 实况降雪 -->
            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.twoLevel">
              </vxe-switch>
              <span v-if="row.twoLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
            <!-- 降雪量 -->
            <span v-if="row.unit == '降雪量'">
              12h降雪：
              <span class="edit-block">
                {{ row.twoLevel }}
              </span>
            </span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-if="row.unit != '实况降雪' && row.unit != '降雨'" v-model="row.twoLevel" type="text"
              placeholder=""></vxe-input>

            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.twoLevel">
              </vxe-switch>
              <span v-if="row.twoLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
          </template>
        </vxe-column>
        <vxe-column field="oneLevel" :edit-render="{}">
          <template #header>
            <div class="block">
              <span :class="['block-wrap', 'one-wrap']"></span>
              <span>一级风险</span>
            </div>
          </template>
          <template #default="{ row }">
            <span v-if="row.unit != '实况降雪' && row.unit != '降雪量' && row.unit != '降雨'" class="edit-block">{{ row.oneLevel
            }}</span>
            <!-- 实况降雪 -->
            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.oneLevel">
              </vxe-switch>
              <span v-if="row.oneLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
            <!-- 降雪量 -->
            <span v-if="row.unit == '降雪量'">
              12h降雪：
              <span class="edit-block">
                {{ row.oneLevel }}
              </span>
            </span>
          </template>
          <template #edit="{ row }">
            <vxe-input v-if="row.unit != '实况降雪' && row.unit != '降雨'" v-model="row.oneLevel" type="text"
              placeholder=""></vxe-input>
            <span v-if="row.unit == '实况降雪' || row.unit == '降雨'">
              <vxe-switch v-model="row.oneLevel">
              </vxe-switch>
              <span v-if="row.oneLevel" style="margin-left:10px">是</span>
              <span v-else style="margin-left:10px">否</span>
            </span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="dialog-wrap" v-if="showDetails">
      {{ showContent }}
    </div>
    <div class="button-wrap" @click="save">保存</div>
  </div>
</template>

<script>
// import XEUtils from 'xe-utils'
// import VXETable from 'vxe-table'
// import { Handler } from 'leaflet'

export default {
  props: ['tableData', 'name'],
  data() {
    return {
      value1: '',
      value2: '',
      showDetails: false,
      selectRow: null,
      isAllChecked: false,
      isIndeterminate: false,
      selectRecords: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    save() {
      console.log('最终数据组合内容', this.tableData);
    },
    changeFlag() {
      this.showDetails = !this.showDetails
    }
  },
  computed: {
    titleName() {
      switch (this.name) {
        case '滑坡':
          return '雨量'
          break;
        case '泥石流':
          return '雨量'
          break;
        case '雪灾':
          return '降雪'
          break;
        case '道路结冰':
          return '气象要素'
          break;
      }
    },
    showContent() {
      switch (this.name) {
        case '雪灾':
          return '先判断是否触发黄色告警。'
          break;
        case '道路结冰':
          return '先判断是否有降雨。'
          break;
        default:
          return '诱发雨量为过去24h内实况累计雨量。'
          break;
      }
    }
  },
  watch: {
    // "tableData": {
    //   handler(nVal, oldVal) {
    //     console.log(nVal, oldVal);
    //   },
    //   immediate: true,
    //   deep: true
    // }
  }
}
</script>

<style lang="less" scoped>
.table-wrap {
  position: absolute;
  width: 100%;
  height: calc(100% - 50px);
  border: 1px solid #395272;
  padding: 24px;
  box-sizing: border-box;
}

.title-wrap {
  // margin: 10px 0 10px 10px;
  display: flex;
  justify-content: space-between;

  span:nth-child(2) {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: -20px;

  .block-wrap {
    display: inline-block;
    width: 24px;
    height: 16px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin-right: 16px;
  }

  .one-wrap {
    background: #E10F00;
  }

  .two-wrap {
    background: #DD8802;
  }

  .three-wrap {
    background: #D3D700;
  }

  .four-wrap {
    background: #3057D8;
  }
}

.dialog-wrap {
  position: absolute;
  width: 137px;
  background: #24355B;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #395272;
  z-index: 99;
  right: 0;
  top: 40px;
  right: 24px;
  padding: 16px 9px;
  font-size: 12px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #CDE9FF;
}

.button-wrap {
  position: absolute;
  width: 133px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #0190E6;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  cursor: pointer;
}

.edit-block {
  display: inline-block;
  min-width: 30px;
  height: 20px;
  border-bottom: 1px solid #395272;
}

.first-header {
  background: pink;
}
</style>
<style>
.vxe-table--striped tbody tr:hover::after {
  display: none;
}

.vxe-table--render-default.border--full .vxe-body--column,
.vxe-table--render-default.border--full .vxe-footer--column,
.vxe-table--render-default.border--full .vxe-header--column {
  background-image: none;
  border: 1px solid#395272 !important;
}

.vxe-icon-edit:before {
  display: none;
}

.first-col {
  position: relative;
  height: 20px;
}

.first-col:before {
  content: "";
  position: absolute;
  left: -50%;
  top: 1px;
  width: 10vw;
  height: 1px;
  transform: rotate(17deg);
  background-color: #395272;
}

.first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -10px;
}

.first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -10px;
}

.my-filter {
  margin: 10px;
}

.page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.vxe-input--inner {
  background: #16243D;
  color: #CDE9FF;
  text-align: center;
}
</style>

运行结果