Vue进阶（幺伍陆）：iView实现table渲染html标签内容
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>
微信扫一扫，打赏作者吧～
