前端页面实现【矩阵表格与列表】

实现页面： 

1.动态表绘制（可用于矩阵构建）

<template>
  <div>
    <h4><b>基于层次分析法的权重计算</b></h4>
    <table table-layout="fixed">
      <thead>
      <tr>
        <th v-for="(_, colIndex) in (numRows + 1)" :key="colIndex">{{colIndex===0?"图层":layers[colIndex-1]}}</th>
      </tr>
      </thead>
      <tbody >
      <tr v-for="(rowData, rowIndex) in generateTableData(numRows)" :key="rowIndex" :style="{ '--wid': wid}">
        <td
          v-for="(cell, colIndex) in rowData"
          :key="colIndex"
          :class="{ nonEditable: isNonEditable(rowIndex, colIndex) }"
        >
          {{rowData[colIndex]}}
          <input
            v-if="colIndex!==0&&!isNonEditable(rowIndex, colIndex)"
            type="text"
            v-model="rowData.values[colIndex]"
            style="width: 100%;border: none;text-align: center"
          />
          <span v-else>{{ value }}</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'TimeManagementTable',
  props:{
    layers:{
      type:Array,
      required: true,
      default: ()=>['地质', '水文', '其他','W']
    },
  },
  data() {
    return {
      numRows:null ,
      wid:null
    };
  },
 
  created() {
    this.numRows = this.layers.length;
    this.wid = 100/(this.numRows+1) + '%';
  },
  methods: {
    isNonEditable(rowIndex, colIndex) {
      // 假设我们想让第二列的第二个单元格（索引为1, 1）为灰色且不可编辑
      // 你可以根据实际需求调整这个逻辑
      return colIndex!==0&rowIndex+1>=colIndex||colIndex===this.numRows;
    },
    generateTableData(numRows) {
      const tableData = [];
      for (let i = 0; i < numRows-1; i++) {
        let arr= Array(numRows + 1).fill('')
        arr[0]=this.layers[i]
        tableData.push(arr); // 填充空字符串或你需要的默认值
      }
      return tableData;
    }
  },
};
</script>
 
<style scoped>
/* 样式可以根据需要添加 */
table {
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  width: var(--wid);
}

核心要点:

• 动态性：可根据不同数据项动态自适应构建表格

 记录数组长度，根据数组长度动态设置行列号数以及其列宽

<tr v-for="(rowData, rowIndex) in generateTableData(numRows)" :key="rowIndex" :style="{ '--wid': wid}">

data() {
    return {
      numRows:null ,
      wid:null
    };
  },

  created() {
    this.numRows = this.layers.length;
    this.wid = 100/(this.numRows+1) + '%';
  },

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  width: var(--wid);
}

• 表格单元格权限控制：只有指定单元格可编辑，收集用户输入数据，其余为灰色且不可编辑

                  v-for="(cell, colIndex) in rowData"
          :key="colIndex"
          :class="{ nonEditable: isNonEditable(rowIndex, colIndex) }"
        >
          {{rowData[colIndex]}}
                      v-if="colIndex!==0&&!isNonEditable(rowIndex, colIndex)"
            type="text"
            v-model="rowData.values[colIndex]"
            style="width: 100%;border: none;text-align: center"
          />
          {{ value }}

 isNonEditable(rowIndex, colIndex) {
      // 假设我们想让第二列的第二个单元格（索引为1, 1）为灰色且不可编辑
      // 你可以根据实际需求调整这个逻辑
      return colIndex!==0&rowIndex+1>=colIndex||colIndex===this.numRows;
    },

• 表格标题行和列设置：设置表格头和表格第一列为指定数组内的名称

 
     
        {{colIndex===0?"图层":layers[colIndex-1]}}
     
     
     
     
                  v-for="(cell, colIndex) in rowData"
          :key="colIndex"
          :class="{ nonEditable: isNonEditable(rowIndex, colIndex) }"
        >
          {{rowData[colIndex]}}
                      v-if="colIndex!==0&&!isNonEditable(rowIndex, colIndex)"
            type="text"
            v-model="rowData.values[colIndex]"
            style="width: 100%;border: none;text-align: center"
          />
          {{ value }}
       
     
     

2.类C#中控件前端实现： 

<template>
  <div class="app-container standard-level">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>StandardLevel</span>
          </div>
          <div>
            <!-- 指标选择 -->
            <div id="indicator" style="border: gray 1px dashed; padding: 5px;">
              <span class="title"> 指标创建</span>
              <el-form size="small" :inline="true">
                <el-form-item label="指标类别" class="form-label" >
                  <el-input
                    v-model="indicatorType"
                    placeholder="请输入指标类别"
                    clearable
                    size="small"
                  />
                </el-form-item>
                <el-form-item  class="flex-container" >
                  <div class="flex-container">
                    <div class="flex-item" v-for="item in layers" :key="item.id">
                      <el-checkbox :label="item.id" style="margin: 8px 0;">{{ item.name }}</el-checkbox>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
              <!-- 操作按钮 -->
              <div class="buttons" style="display: flex;justify-content: center;">
                <el-button type="primary" size="mini" @click="addNode">添加</el-button>
                <el-button type="warning" size="mini" @click="modifyNode">确定</el-button>
                <el-button type="danger"  size="mini" @click="cancel">取消</el-button>
              </div>
            </div>
            <div id="list" style="margin-top: 10%;border: gray 1px dashed; padding: 5px;">
              <span class="title">层次结构</span>
              <!-- 层次结构 -->
              <el-tree
                :data="treeData"
                :props="defaultProps"
                show-checkbox
                node-key="id"
                ref="tree">
              </el-tree>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
</div>
</template>
 
<script>
import ElementForm from '@/plugins/package/panel/form/ElementForm.vue'
 
export default {
  components: { ElementForm },
  data() {
    return {
      indicatorType:'',
      selectedCategory: '',
      selectedIndicators: [],
      layers:[
        { id: '001', name: '塌陷点buf' },
        { id: '002', name: '断裂buf' },
        { id: '003', name: '水系buf300' },
        { id: '004', name: '轨道交通buf' },
        { id: '005', name: '地下水变幅' },
        { id: '006', name: '第四系厚度' },
        { id: '007', name: '工程地质' },
        { id: '008', name: '岩溶水富水性' },
      ],
      treeData: [
        {
          label: '地层条件',
          children: [
            { label: '剥蚀buf' },
            { label: '第四系厚度' },
            { label: '工程地质' },
          ],
        },
        { label: '水文条件' },
        { label: '其他条件' },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    addNode() {
      // 添加节点的逻辑
    },
    modifyNode() {
      // 修改节点的逻辑
    },
    cancel() {
      // 取消操作的逻辑
    },
  },
};
</script>
 
<style scoped>
.standard-level {
  padding: 20px;
  width: 30%;
}
.form-label {
  margin-bottom: 10px;
}
.buttons {
  margin-top: 20px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  .flex-item {
    width: 50%;
  }
}
span.title{
  display : block;
  width : 25%;
  height: 15px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  top:-15px;
  text-align: center;
  background: white;
}
 
</style>

核心要点：

• checkbox列对齐设置

Element ui 丨el-checkbox-group 布局对齐_el-checkbox-group 对齐方式-CSDN博客

• 边框上显示字体设置

 

              指标创建

 span.title{
  display : block;
  width : 25%;
  height: 15px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  top:-15px;
  text-align: center;
  background: white;
}