js如何把html当字符串渲染到页面上

JavaScript015

js如何把html当字符串渲染到页面上,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签,输入js代码:var a = '<input type="text" value="test" />'document.body.innerText = a。

3、浏览器运行index.html页面,此时html代码被当成字符串渲染到了页面上。

使用Jquery结合AngulraJs使用的时候,在render完table后,执行一段js脚本,把JqTable应用到该table上,能够捕获到AngularJs渲染完成页面的事件。\x0d\x0a要达到这个目的,需要为当前的app自定义directive:\x0d\x0aapp.directive('onFinishRenderFilters', function ($timeout) {\x0d\x0areturn {\x0d\x0arestrict: 'A',\x0d\x0alink: function(scope, element, attr) {\x0d\x0aif (scope.$last === true) {\x0d\x0a$timeout(function() {\x0d\x0ascope.$emit('ngRepeatFinished')\x0d\x0a})\x0d\x0a}\x0d\x0a}\x0d\x0a}\x0d\x0a})\x0d\x0a然后,在需要监控的地方,加上该directive:\x0d\x0a\x0d\x0a{{user.Id}}\x0d\x0a {{user.Name}}\x0d\x0a {{user.Salary}}\x0d\x0a\x0d\x0a最后,补充上需要render完成之后的Js脚本:\x0d\x0a$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {\x0d\x0a//下面是在table render完成后执行的js\x0d\x0avar table = $("#leaderBoard").dataTable({\x0d\x0abJQueryUI: true,\x0d\x0a"sScrollX": '100%',\x0d\x0a})\x0d\x0a}) 回答于 2022-11-16 抢首赞 已踩 0 查看全部1个回答 — 为你推荐更多精彩内容 — 正在加载 加载失败 点击重新加载

微信

微博

QQ

QQ空间

答案纠错

举报

取消 赞赏答主 5 10 50 100 200

已赞赏0财富值

合计:0 财富值

登录后赞赏 选择举报类型 侵犯版权 色情低俗 涉嫌违法犯罪 时政信息不实 垃圾广告 低质灌水 工作人员会在48小时内处理,处理结果请关注系统通知,感谢您对百度知道的支持。 确定 void function(a,b,c,d,e,f){function g(b){a.attachEvent?a.attachEvent("onload",b,!1):a.addEventListener&&a.addEventListener("load",b)}function h(a,c,d){d=d||15var e=new Datee.setTime((new Date).getTime()+1e3*d),b.cookie=a+"="+escape(c)+"path=/expires="+e.toGMTString()}function i(a){var c=b.cookie.match(new RegExp("(^| )"+a+"=([^]*)(|$)"))return null!=c?unescape(c[2]):null}function j(){var a=i("PMS_JT")if(a){h("PMS_JT","",-1)try{a=a.match(/{["']s["']:(\d+),["']r["']:["']([\s\S]+)["']}/),a=a&&a[1]&&a[2]?{s:parseInt(a[1]),r:a[2]}:{}}catch(c){a={}}a.r&&b.referrer.replace(/#.*/,"")!=a.r||alog("speed.set","wt",a.s)}}if(a.alogObjectConfig){var k=a.alogObjectConfig.sample,l=a.alogObjectConfig.randd="https:"===a.location.protocol?"https://fex.bdstatic.com"+d:"http://fex.bdstatic.com"+d,k&&l&&l>k||(g(function(){alog("speed.set","lt",+new Date),e=b.createElement(c),e.async=!0,e.src=d+"?v="+~(new Date/864e5)+~(new Date/864e5),f=b.getElementsByTagName(c)[0],f.parentNode.insertBefore(e,f)}),j())}}(window,document,"script","/hunter/alog/dp.mobile.min.js") window.tt = 1676725951

问题描述:页面内,使用选项卡,进行内容显示的切换。切换后,原本高度合适的表格出现白边,以及滚动条

检查Dom会发现,el-table组件内,发现了一个类名为 is-scrolling-none 的固定行内样式的高度的div,导致高度显示错误:

<div class="el-table__body-wrapper is-scrolling-none" style="height: 510px">

------

</div>

登录后复制

搜索后发现,

在keep-alive页面缓存的页面中,切换其他页面,再切回已打开页面时,也会出现这种,table组件底部出现白边以及滚动条的问题

同样切换表格的数据源时,也会出现这种问题

2、思路:

官方文档里说明:

所以推测为,需要重新渲染一下表格,elementUI的文档里也说明了这个问题

3、实际操作

首先给需要重新渲染的table组件绑定一个字符串名

<el-table ref='table'></el-table>

<!-- 有多个table组件时,绑定不同字符串 -->

<el-table ref='table1'></el-table>

<el-table ref='table2'></el-table>

<el-table ref='table3'></el-table>

登录后复制

在进行操作之后,调用dolayout方法

比如keep-alive的缓存页面,在activated的生命周期函数里调用:

activated() {

this.$nextTick(() =>{

this.$refs.table.doLayout()

}

}

登录后复制

如果是更换数据源,则在接口的回调里执行:

axios.post('...')

.then(function (response) {

this.$nextTick(() =>{

this.$refs.table.doLayout()

})

})

登录后复制

如果是选项卡控制显示,可以在绑定值的watch监听函数里执行: