Vue table里嵌套template问题

最新推荐文章于 2023-05-29 22:53:51 发布
最新推荐文章于 2023-05-29 22:53:51 发布
阅读量2.9k 收藏
点赞数
分类专栏： 技术文章
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happygrillcx/article/details/103122780
版权
本文介绍了在Vue中使用table时遇到的一个问题：在Chrome下正常渲染，但在IE下可能无法渲染。问题在于IE不支持table内的template标签。解决方法是将涉及的模板内容封装为Vue组件，以确保在所有浏览器中正确显示。
摘要由CSDN通过智能技术生成

Vue table里嵌套template渲染时Chrome可能正常的，但是ie下可能会渲染不出来的情况，vue里table只能解析tr td无法，无法解析template，解决办法是：将该模块提取为组件形式即可解决该问题。下面是示例参考代码：

<!DOCTYPE html[]>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>
    </title>
    <script src="LoadJavaScript.js" type="text/javascript">
    </script>
      <script type="text/x-template" id="customer-table">
      <table cellpadding="0" cellspacing="0"  border="1" style="width: 100%;cell-padding:0; cell-spacing:0;word-break:break-all;border-collapse: collapse;">

                <tr>
                    <td colspan="6" style="width:90%;text-align: center;">
                        <p><strong>评分因素与权重分值</strong></p>
                    </td>
                    <td rowspan="2" style="width:10%;text-align: center">
                        <p><strong>评分标准</strong></p>
                    </td>
                </tr>
                <tr>
                    <td style="width:10%;text-align: center;">
                        <p><strong>条款号</strong></p>
                    </td>
                    <td colspan="2" style="width:35%;text-align: center">
                        <p><strong>评分因素</strong></p>
                    </td>
                    <td style="width:10%;text-align: center">
                        <p><strong>评分因素权重分值</strong></p>
                    </td>
                    <td style="width:25%;text-align: center">
                        <p><strong>各评分因素细分项</strong></p>
                    </td>
                    <td style="width:10%;text-align: center">
                        <p><strong>分值 </strong></p>
                    </td>
                </tr>

                 <tr>
                    <td colspan="1" :rowspan="gmodel.一信封施工组织设计评审.length+1" style="text-align: center;">
                   

最低0.47元/天 解锁文章
happygirllcx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue通用模板渲染Table
LSFQ的博客
05-19 1015
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
Vue table表格模板
热门推荐
Tom__cy的博客
06-11 3万+
el-标签总结：https://blog.csdn.net/Tom__cy/article/details/89680067 el-pagination 封装: https://blog.csdn.net/Tom__cy/article/details/89926274 axios 封装请求数据：https://blog.csdn.net/Tom__cy/article/details/89918...
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
qq_39404437的博客
10-28 7132
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
vue Table组件封装 - 渲染列表、不同表格列、分页、位于编辑面板中
知己知彼的百战不殆
11-22 4642
效果描述：点击输入框弹出table面板，面板包括标题、列表分页、检索条件、确定取消安钮、单选全选框。面板回显已选中条目，切换页时仍能显示。 思路：组件中包括面板整体样式、标题 、按钮、分页组件；页面中将搜索条件、th、tr用slot传入组件模板中，形成每页的table。监听面板打开关闭的变量进行重新渲染，点击确定时页面父组件监听事件传出选中条目的数组，符合条件则执行面板关闭及后续。点击检索按钮时通...
vue+element的table组件学习模板
kaelyn_X的博客
01-23 1399
html> head> meta charset="UTF-8"> title>title> link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> head> body> div id="app"
table中嵌套多层table
yulin009的博客
10-06 3万+
因工作业务需求，需要展示一个多层嵌套的数据结构，现整理如下，分享给需要的朋友，应用框架vue2。 初始的数据结构如下： new Vue({ el:"#table1", data:{ table1:[{ order: "ex-20171006", table2: [{ kind:
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1311
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
vue中table嵌套循环下使用vue-Contextmenu组件创建右键菜单
GoldenFish的专栏
05-10 689
table嵌套中使用vue-contextmenuvue-contextmenu安装安装配置组件中使用 a.vue以上代码的讲解结果: vue-contextmenu安装 安装和使用文档地址：https://github.com/chIIC/vue-contextmenu 安装配置 main.js中配置改组件的全局注册 //右键菜单组件 import VueContextMenu from "vue-contextmenu" Vue.use(VueContextMenu) 组件中使用 a.vue &lt
Ant-Design-Vue的tabale组件嵌套应用
手心守贝
09-20 4747
原因 最近在使用ant design vue时，遇到一个简单的功能----表格嵌套 去查官方文档，发现他写的很简单，重点是每一组都是写的固定的假数据 那么问题来了，我的数据(二维数组)来了之后，table嵌套，怎么才能让他们渲染到不同的组里面呢 解决 那就查查资料，好好研究下文档吧 先看下官方的例子，内外层的table基本都是正常写的（行列数据都是指定的） 不同的是内层table使用了两个参数， ...
在组件中内嵌其他组件在嵌套组件不生效
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-02 651
1、在组件中内嵌其他组件在嵌套组件不生效报错： Failed to resolve component son 2、在组件中内嵌其他组件在嵌套组件不生效错误原因： 将子组件嵌套的组件放在了模板下面，导致子组件嵌套的组件渲染不出来 3、在组件中内嵌其他组件在嵌套组件不生效解决方法 把使用的sonSon组件放在子组件定义的模板下面，还要注意sonSon组件定义的位置应该在子组件son的前面，否则子组件son是找不到这个sonSon组件的
Vue -- 通过 template 控制表格某一列根据状态不同显示的文字不同
暖一杯茶的博客
08-17 2060
<el-table-column label="状态"> <template slot-scope="scope"> <span v-if="scope.row.status == 'init' ">已预约</span> <span v-if="scope.row.status == 'arrival' ">已预约</span> <span v-if="s
Vue + Element-ui Table <template slot-scope="scope">
个人纪录、总结！
07-08 373
Vue + Element-ui Table表格中template的用法： <template slot-scope="scope"> 篇一：https://blog.csdn.net/tg928600774/article/details/81945140
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 9381
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
vue+element 学习之路（十一）表格中的<template>模板引擎
weixin_39327044的博客
05-04 3487
今天在做表格的时候遇到的一个问题，就是在一列里面需要用到多个参数，或者需要调用方法等。翻阅了element文档中el-table的自定义列模板，给了我很大的帮助，下面总结一下自己的方法。 在这里期望城市的原生数据是为区域码，期望薪资列原生数据为纯数字 期望职位通过prop直接传入的方式即可 对于期望城市列表中，区域码需要转换为文字，这里需要调用到方法进行转换，使用模板引擎事半功倍。 slot...
Vue中组件使用template的失效问题
草木如织，匪我思且
10-15 4507
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <temp></temp> </div> <template id="cpnc"> <div...
vue 自定义table格式组件
weixin_45991188的博客
07-13 364
<template> <div class="detail-form"> <ul> <li v-for="(item, index) in tableData" :key="index" > <span>{{item.name}}</span> <ul v-if="item.children"> <l
vue 中后台三级及以上路由嵌套，路由缓存(keep-live)不生效的问题
u010227042的博客
10-24 3037
以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写） nested menu1 menu1-1 menu1-2 menu1-2-1 const nestedRouter = { path: '/nested', component: Layout, redirect: '/nested/menu1/menu1-1', name: 'Nested', meta: { title: 'Nested Rou
vueCLI3 中 template的使用问题
Handsome3618的博客
09-17 2723
在vueCLI3构建的项目中，使用vue-router时 const Seller={ template: '&lt;div&gt;seller&lt;/div&gt;' } 这段代码一直报错，是template使用出错：You are using the runtime-only build of Vue where the template compiler is not availab...
table里面嵌套vue-treeselect 异步加载
最新发布
09-08
要在table中嵌套vue-treeselect并实现异步加载，可以按照以下步骤进行： 1.首先，确保已经安装并引入了vue-treeselect组件，并在Vue实例中注册。 ``` import Vue from 'vue' import VueTreeselect from '@riophae/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值