vue使用原生table动态合并行

本文介绍了一个使用Vue.js实现的问题及解决方案展示表格。表格详细列举了常见问题如终端无法启动、屏幕不显示等,并提供了相应的解决步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.vue部分

 <table
              class="mb-5"
              border="1"
              cellspaing="0"
              align="center"
              width="85%"
            >
              <thead>
                <tr>
                  <th
                    class="tabHeader"
                    v-for="(i, num) in tabHeader"
                    :key="num + 2"
                  >
                    {{ i.label }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <template v-for="i in tabContent">
                  <template v-for="(g, _index) in i.content">
                    <tr :key="_index + i.name">
                      <td
                        v-if="_index == 0"
                        class="colHead"
                        :rowspan="i.content.length"
                      >
                        {{ i.name }}
                      </td>
                      <td :key="_index + 'right'">
                        {{ g }}
                      </td>
                    </tr>
                  </template>
                </template>
              </tbody>
            </table>

js部分

<script>
export default {
data() {
    return {
     tabHeader: [{
            key: "name",
            label: "出现的问题",
          },
          {
            key: "content",
            label: "可能的解决方案",
          },
        ],
        tabContent: [{
            name: "1、终端无法启动",
            content: [
              "·确保电池安装正确",
              "·更换带有充足电量的电池",
              "·取下电池后重新安装电池",
              "·设备复位",
              "·重新启动设备",
            ],
          },
          {
            name: "2、屏幕不显示",
            content: [
              "·重新启动设备",
              "·确认设备是否处于休眠状态",
              "·重新启动设备",
              "·更换带有充足电量的电池",
            ],
          },
          {
            name: "3、键盘无法响应",
            content: [
              "·确认设备是否处于休眠状态",
              "·重新启动设备",
              "·更换带有充足电量的电池",
            ],
          },
          {
            name: "4、SD卡无法识别",
            content: [
              "·确认SD卡是否插反",
              "·确认SD卡是否插牢",
              "·确认SD卡是否损坏",
              "·重新启动设备",
              "·更换带有充足电量的电池",
            ],
          },
          {
            name: "5、电池无法充电",
            content: [
              "·确认AC适配器是否损坏",
              "·确认AC适配器是否已接入市电",
              "·确认AC适配器是否插牢",
            ],
          },
        ],
    };
  },
}
</script>

效果图

在这里插入图片描述

Vue.js中,动态渲染表格并合并相同名称的行通常涉及到数据处理、模板和事件绑定。首先,你需要有一个包含列名和对应值的对象数组作为数据源。当你想要将相同名称的行合并时,可以创建一个新的对象数组,其中每个对象都是一个“组”,包含一个名称和一个累计数值。 下面是一个简单的步骤示例: 1. **数据处理**: - 遍历原始数组,对于每个对象,检查当前是否已经有相同的名称存在于新数组中。如果没有,直接添加;如果有,则累加对应的数值并更新总和。 ```javascript data() { return { groupedData: [], originalData: [ { name: 'Name1', value: 10 }, { name: 'Name1', value: 20 }, { name: 'Name2', value: 15 }, { name: 'Name3', value: 5 } ] }; }, methods: { processData() { let group = {}; this.originalData.forEach(item => { if (!group[item.name]) { group[item.name] = { name: item.name, values: [item.value], total: 0 }; } else { group[item.name].values.push(item.value); group[item.name].total += item.value; } }); this.groupedData = Object.values(group); // 转换为数组形式 } } ``` 2. **模板渲染**: - 使用v-for遍历`groupedData`,显示每一行以及其总和。 ```html <table> <tr v-for="(item, index) in groupedData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.total }}</td> <!-- 显示累计数值 --> <td v-if="index === 0"><!-- 如果这是第一行 --> {{ item.values.join(', ') }} <!-- 显示每个单独的值 --> </td> </tr> </table> ``` 3. **触发处理函数**: - 可能需要在数据变化或某个特定操作后调用`processData()`方法,比如组件初始化完成或者用户手动合并了行。 记得在实际应用中,这只是一个基础示例,可能还需要考虑更复杂的情况,如处理空值、异步加载数据等。同时,如果你的表头也需要动态生成,可以在`processData`中增加逻辑来处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值