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

实现页面:

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);

}

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

<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>

isNonEditable(rowIndex, colIndex) {

// 假设我们想让第二列的第二个单元格(索引为1, 1)为灰色且不可编辑

// 你可以根据实际需求调整这个逻辑

return colIndex!==0&rowIndex+1>=colIndex||colIndex===this.numRows;

},

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

<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>

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博客

边框上显示字体设置

<div id="indicator" style="border: gray 1px dashed; padding: 5px;">

<span class="title"> 指标创建</span>

</div>

span.title{

display : block;

width : 25%;

height: 15px;

font-weight: bold;

font-size: 16px;

position: relative;

top:-15px;

text-align: center;

background: white;

}

相关推荐
小二·10 分钟前
layui树形组件点击树节点后高亮的解决方案
前端·javascript·layui
Minions_Fatman12 分钟前
【layui】table的switch、edit修改
前端·javascript·layui
小孙姐27 分钟前
4——单页面应用程序,vue-cli脚手架
前端·javascript·vue.js
生椰拿铁You29 分钟前
15 —— Webpack中的优化——前端项目使用CDN技术
前端·webpack
生椰拿铁You29 分钟前
13 —— 开发环境调错-source map
前端
知野小兔41 分钟前
【Angular】async详解
前端·javascript·angular.js
来啦来啦~1 小时前
vue项目实现动效交互---lottie动画库
前端·vue.js·交互
没了对象省了流量ii1 小时前
11.9K Star!强大的 Web 爬虫工具 FireCrawl:为 AI 训练与数据提取提供全面支持
前端·人工智能·爬虫
我的div丢了肿么办1 小时前
vue项目中如何加载markdown作为组件
前端·javascript·vue.js
大梦百万秋1 小时前
JavaScript网页设计案例:动态交互与用户体验提升
javascript