TBA_GXPT/ruoyi-ui/src/views/developer/example/index.vue

<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="display: flex;background-color: white;margin-left: 1%;" :style="{'height':heightAll*0.42+'px'}">
      <div style="width: 10%;margin-left: 1%;width: 10%;background-color: white;">
        <div style="font-size: 20px;justify-content: center;background-color: #487ACF;color: white;display: flex;align-items: center;" :style="{'height':heightAll*0.04+'px'}">
          模型装配
        </div>
        <div style="margin-top: 20%;">
          <el-radio label="1" size="large">滚子河流域分区</el-radio>
          <el-radio label="1" size="large">西江流域分区</el-radio>
          <el-radio label="1" size="large">分水江流域分区</el-radio>
          <el-radio label="1" size="large">雨山流域分区</el-radio>
        </div>
        <div style="margin-top: 50%;">
          <el-button plain style="width: 100%;" type="primary" :icon="Plus">新增其他分区</el-button>
        </div>
      </div>
      <div style="margin-left: 1%;width: 87%;">
        <div style="width: 100%;display: flex;justify-content:end;margin-right:2%;">
          <el-button plain  type="primary">编辑</el-button>
          <el-button plain  type="primary">导出</el-button>
          <el-button  type="primary">确认</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 1%;background-color: white;padding-top: 1%;" :style="{'height':heightAll*0.57+'px'}">
      <div style="margin-left: 1%;width: 100%;display: flex;">
        <div style="margin-left: 1%;width: 100%;display: flex;">
          <el-input v-model="input" style="width: 20%;" placeholder="Please input" />
          <el-button  type="primary">确认</el-button>
        </div>
        <div style="width: 100%;display: flex;justify-content:end;margin-right:2%;">
          <el-button plain  type="primary">编辑</el-button>
          <el-button plain  type="primary">导出</el-button>
          <el-button  type="primary">确认</el-button>
        </div>
      </div>
      <el-table 
        :data="tableData" 
        style="width: 98%;margin-left: 1%;margin-top: 1%;"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{fontSize: '14px', textAlign: 'center' }"
        :row-style="{ height: heightAll*0.01+'px',fontSize: '17px',textAlign:'center'  }"
        border 
        :max-height="tableheight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="分区参数" />
        <el-table-column prop="name" label="参数值" />
        <el-table-column prop="address" label="分区参数" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import {
  ArrowLeft,
  Plus
} from '@element-plus/icons-vue'
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
const tableData = [
  {
    date:'蓄水容量(WM)',
    name:'1.33',
    address:'上层蓄水容量(WUM)'
  },
  {
    date:'下层蓄水容量(WLM)',
    name:'55',
    address:'蒸散发折算系数(k)'
  },
  {
    date:'深层蒸散发系数(C)',
    name:'0.14',
    address:'地下水出流系数(KG)'
  },
  {
    date:'最大自由需水量(SM)',
    name:'16',
    address:'初始含水量(WO)'
  },
  {
    date:'初始上层含水量(WU0)',
    name:'30',
    address:'壤中流系数(KSS)'
  },
  {
    date:'初始下层含水量(WL0)',
    name:'38',
    address:'汇流滞时(LAG)'
  },
]
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.7
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
function showNode(data, node){
  console.log(data,node)
}
</script>
<style scoped lang="scss">
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>