iView实现table渲染html标签内容

Vedu • 2021-07-16 06:43 • 程序开发 • 阅读 833

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>

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/25553.html