当前位置:首页 > VUEJS > iview > 正文内容

Vue进阶(幺伍陆):iView实现table渲染html标签内容

anan2年前 (2021-07-29)iview1705

Vue+iView项目开发过程中,需要实现页面根据html格式的字符串,在页面中解析的效果。

例如 let htmlStr='<div style="font-size=16px">我是小标题</div>'

页面中显示效果如下:

我是小标题

主要是在render()函数中实现,示例代码如下:

{ title: "标题", key: "title", align: "center", className:'cleanTitle', render:(h,params)=>{ return h("div",{domProps:{ innerHTML:`<a href=`+params.row.url+` target='_blank'>`+params.row.title+`</a>`//渲染html内容 }}) // return <a href={`${params.row.url}`} target='_blank'>{params.row.title}</a> 直接渲染标签 }拓展阅读 表单重置this.$refs[name].resetFields();失效问题解决在应用Vue进行项目开发过程中,应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。

Form必须要有ref属性;Form必须绑定:model;<Form ref="submitUser" :model="submitUser">Form的FormItem中必须要有prop属性;

<FormItem prop="realName"></FormItem>Form包裹的元素绑定值需与FormItem中prop属性名称保持一致(可类比Form表单校验规则)

<Form ref="submitUser" :model="submitUser"> <FormItem prop="uname"> <Input type="text" v-model="submitUser.uname" placeholder="用户名"></Input> </FormItem> <FormItem prop="passwd"> <Input type="text" v-model="submitUser.passwd" placeholder="密码"></Input> </FormItem> <FormItem> <Button type="info" @click="query">Login</Button> <Button @click="handleReset('submitUser')" style="margin-left: 8px;" type="info">Reset</Button> </FormItem></Form><script> export default { data () { return { submitUser:{ realName:'', identityNumber:'', mobileNumber:'', telePhoneNumber:'' } } }, methods:{ handleReset (name) { this.$refs[name].resetFields(); } } }</script>

打赏
版权声明:所有来源为第三方内容,若本站收录的文章无意侵犯了贵司版权,请给下面邮箱地址来信,我们会及时处理和回复,谢谢。

管理员邮箱:42004990@qq.com

微信公众号

分享给朋友:

相关文章

SEO应该怎么做站内优化?站内优化包含了什么内容?

SEO应该怎么做站内优化?站内优化包含了什么内容?

一、站内优化技巧 站内优化,顾名思义就是指网站内部优化,即网站本身内部的优化,SEO站内优化包括代码和标签优化、内容优化、URL优化。 1、代码优化 为网站减肥可以进行代码优化,代码优化最直接的表现就...

古书注解的主要内容是什么?

古书注解的主要内容是什么?

古书旧注的内容很广泛,主要包括解释词义、注明音读、疏通文意、阐明思想、分析句读、讲解语法、说明修辞手段、诠释典故、校正文字、考证人名、地名等。   古书注解的内容和范围按年代分类:   一、汉唐人的注...

自学linux应该学哪些内容呢?

自学linux应该学哪些内容呢?

新手学习linux方向大概如下: 1.先学习linux的基本命令,比如:cd,ls,cp,mv,mkdir,rm,cat,touch增删改查等等命令。 2.熟悉基本的操作后学习linux相关文件权限命...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。