iview render方法生成iswitch，input等表单组件并进行双向绑定

最新推荐文章于 2023-11-15 14:24:06 发布

ybc4652

最新推荐文章于 2023-11-15 14:24:06 发布

阅读量847

点赞数

分类专栏： vue 文章标签： iview iview-switch iview render 双向绑定

本文链接：https://blog.csdn.net/ybc4652/article/details/97791194

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

按钮就不说了，主要是表单组件，要实现双向绑定，话不多说直接上代码

{
	title: '状态',
	key: 'state',
	render: (h, params) => {
	  return h('div', [
	    h('i-switch', {
	      props: {
	        size: 'small',
	        trueValue: 1,
	        falseValue: 0,
	        value: params.row.state
	      },
	      on: {
	        input: function (event) {
	          // 这里会起到监听的作用
              params.row.state = event
	        },
	        'on-change': (value) => {
	          this.$Modal.confirm({
	            title: '是否' + (value ? '启用' : '停用') + '？',
	            content: '<p>此项目将会被' + (value ? '启用' : '停用') + '！</p>',
	            onOk: () => {
	
	            },
	            onCancel: () => {
	              if (params.row.state === 1) {
	                params.row.state = 0
	              } else {
	                params.row.state = 1
	              }
	            }
	          })
	        }
	      }
	    })
	  ])
	}
}