el-table进阶（每条数据分行或合并）

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量1.2k 收藏 2
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42192641/article/details/133647000
版权

最麻烦的还是css样式，表格样式自己调吧

<!-- ——————————————————————————————————根据数据拓展表格—————————————————————————————————— -->
<div style="display: flex">
  <div style="width: 100px">
    <div
      style="
        height: 41px;
        border: 1px solid #8f8e8e;
        border-right: none;
        background-color: #555555;
      "
    ></div>
    <div
      class="runwayState"
      style="
        border: 1px solid #8f8e8e;
        border-right: none;
        height: 100%;
        display: flex;
      "
    >
      使用跑道 灯光情况
    </div>
  </div>
  <div style="flex: 1">
    <el-table :data="tableData" style="width: 100%" class="custom-table">
      <el-table-column label="使用跑道" width="150">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="6">
              <div>起</div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div>降</div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 坡度灯列 -->
      <el-table-column label="坡度灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_4'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_4']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 进近灯列 -->
      <el-table-column label="进近灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_5'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_5']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_6'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_6']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 跑道灯列 -->
      <el-table-column label="跑道灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_7'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_7']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_8'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_8']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 滑行灯列 -->
      <el-table-column label="滑行灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_9'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_9']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_10'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_10']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 灯光科列 -->
      <el-table-column label="灯光科">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_11'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_11']"
              maxlength="3"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 气象列 -->
      <el-table-column label="AWOS旋钮">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_12'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_12']"
              maxlength="5"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 时间列 -->
      <el-table-column label="时间">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_13'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_13']"
              maxlength="5"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 签名列 -->
      <el-table-column label="签名">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_14'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_14']"
              maxlength="3"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

数据形式：

     tableData: [
        {
          way0_1: "起",
          way0_2: "降",
          way0_3: "10",
          way0_4: "12",
          way0_5: "5",
          way0_6: "7",
          way0_7: "8",
          way0_8: "10",
          way0_9: "9",
          way0_10: "11",
          way0_11: "3",
          way0_12: "25°C",
          way0_13: "14:30",
          way0_14: "John",
        },
        {
          way1_1: "起",
          way1_2: "降",
          way1_3: "9",
          way1_4: "11",
          way1_5: "4",
          way1_6: "6",
          way1_7: "7",
          way1_8: "9",
          way1_9: "8",
          way1_10: "10",
          way1_11: "2",
          way1_12: "24°C",
          way1_13: "15:00",
          way1_14: "Alice",
        },
        {
          way2_1: "起",
          way2_2: "降",
          way2_3: "10",
          way2_4: "12",
          way2_5: "5",
          way2_6: "7",
          way2_7: "8",
          way2_8: "10",
          way2_9: "9",
          way2_10: "11",
          way2_11: "3",
          way2_12: "25°C",
          way2_13: "14:30",
          way2_14: "John",
        },
        // 可以继续添加更多的数据行
      ],

Rrar
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 element-ui@2.12.0，使用前请熟悉： element-ui@2.12.0 element-ui@2.12.0 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
Hive 学习笔记 (二)
乄浅醉的专栏
06-24 5405
存储格式Hive从两个维度对表的存储进行管理： row format 和 file format。 row format 指 行和一行中的字段如何存储。对于Hive来说，row format的定义由SerDe定义。查询表时，SerDe 把文件中字节形式的数据行反序列化为Hive内部操作数据行时所使用的对象形式。执行Insert 或者CTAS 时，表的SerDe会把Hive的数据行内部表示形式序列化成
在实践中常用的两种分割集合中元素的方法
sanding的博客
09-22 714
背景 有些时候，需要把集合中的元素，用逗号进行分割。记录两种常用的处理方式。 过程 经典分割写法 public static String convertToDelimitedString(List<String> list) { StringBuilder resultString = new StringBuilder(); if (list != null) { for (String result : list) {
vue的table列表中数字千位分隔符展示转换
weixin_60301909的博客
01-24 404
vue数字千位分割符
Element表格多数据展示如何以、间隔区分数据
派大星儿的博客
02-28 506
Element表格多数据展示如何以、间隔区分数据 <el-table-column prop="estates" align="center" label="绑定楼盘" width="400"> <template slot-scope="scope"> <b v-for="(item,i) in scope.row.estates"><b v-if="i != 0">、</b>{{item.name}}</b> &lt
el-table表头换行、el-table-column单元格换行
热门推荐
new_Petrichor的博客
06-30 1万+
el-table表头换行、el-table-column单元格换行
实现el-table中邮箱分行展示和逗号
fury的博客
03-21 517
这里将数据进行splite显示将后端传回的数据逗号进行分割，因为后端传回来的数据是好几个邮箱用逗号间隔的一整个字符串例如‘aaa.com,aaa,com........’,这里先将字符串进行分割然后map方法便利出每个元素，重点这里使用了{length}，在进行判断如果次元素后面还有元素就加上一个逗号，然后分行，如果没有元素了就不加上逗号，三元判断，最后变成字符串.join('')但正如现在在我的代码中一样，它会在最后一个字符串之后放置另一个中断，这是我想避免的事实。
给el-table动态添加竖线分割
滕青山博客
01-07 3748
给el-table动态添加竖线分割 需求：每隔4个列添加一个竖线分割 vue文件： 结构： <!-- 给某个td里面添加类名:cell-class-name --> <el-table :data="dataList" size="mini" border @selection-change="selectionChangeHandle" :cell-class-name="addSeparate" > </el-table> 样式： &
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤
第三篇-table
naruhina的博客
08-05 169
table主要与tr分行，td,th分单元格一起使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; t
element table数组数据分行显示（在table里面添加按钮）（table插槽的使用）
weixin_49376462的博客
07-05 2229
element table数组数据分行显示,在table里面放按钮,table插槽的使用.向table里添加按钮。
vue中element框架table组件单单元格分行显示（合并行效果）
Elets的博客
08-23 3265
vue中element框架table组件单单元格分行显示（合并行效果）
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 811
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
el-table 动态合并相同数据的列
12-15
为了动态合并el-table中相同数据的列，我们需要通过循环数据源来获取需要合并的行数和列数，并使用mergeCell方法来实现合并。具体步骤如下： 1.在el-table中添加自定义的表格列，用于合并单元格。 2.在自定义表格列中使用mergeCell方法来实现单元格的合并。 下面是一个示例代码，用于合并el-table中相同数据的列： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column label="合并列" align="center"> <template slot-scope="scope"> <span v-if="scope.row.mergeRow" :rowspan="scope.row.mergeRow">{{ scope.row.name }}</span> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column>> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, { name: '张三', age: 24 }, { name: '李四', age: 26 }, { name: '王五', age: 28 } ] } }, methods: { mergeCell({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 判断是否为第一列 let rowspan = 1 for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i].name === row.name) { rowspan++ } else { break } } if (rowspan > 1) { return { rowspan: rowspan, colspan: 1 } } else { return { rowspan: 0, colspan: 0 } } } } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值