iview 中table嵌套select,radio的使用

要进行select和radio等在table中的嵌套,首先要明白reder是什么?

一**.虚拟dom**
  DOM是文档对象模型(Document Object Model)的简写,在浏览器中通过js来操作DOM的操作性能很差,于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。React和Vue2都使用了虚拟DOM技术,虚拟DOM并不是真正意义上的DOM,它作为一个轻量级的JavaScript对象,在状态发生变化时,会进行Diff运算,来更新发生变化的DOM,对于未发生变化的DOM节点,不予操作,由于不是全部重绘,大大提高更新渲染性能。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h, vm中有一个方法 _c, 也是这个函数的别名。
  在Vue2中,虚拟DOM就是通过一种VNode类表达,每个DOM元素或组件都对应一个VNode对象。
VNode节点解析:

children 子节点,数组,也是VNode类型。
text 当前节点的文本,一般文本节点或注释节点会有该属性。
elm 当前虚拟节点对应的真实的DOM节点。
ns 节点的namespace
content 编译作用域
functionalContext 函数化组件的作用域
key 节点的key属性,用于作为节点的标识,有利于patch的优化
componentOptions 创建组件实例时会用到的选项信息。
child 当前节点对应的组件实例。
parent 组件的占位节点。
raw 原始html
isStatic 静态节点的标识
isRootInset 是否作为根节点插入,被<transition>包裹的节点,该属性的值为false。
isConment 当前节点是否是注释节点。
isCloned 当前节点是否为克隆节点。
isOnce 当前节点是否有v-once指令。

VNode主要可以分为以下几类:

TextVNode 文本节点。
ElementVNode 普通元素节点。
ComponentVNode 组件节点。
EmptyVNode 没有内容的注释节点。
CloneVNode 克隆节点,可以是以上任意类型的节点,唯一的区别在于isCloned属性为true。

二.CreateElement基本用法
1.基本参数
createElement构成了Vue虚拟DOM的模板,它有3个参数:

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串,组件选项对象,或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子虚拟节点 (VNodes),由 `createElement()` 构建而成,
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    '创建h1标签',
    createElement('h1', 'Render函数'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

三,reder懂个大概就可以进行代码的编写了

select
			{
								title: '特征',
								key: 'feature',
								width: 230,
								render: (h, params) => {
									return h(
										'Select',
										{
											props: {},
											on: {
												'on-change': (event) => {
													this.data2[params.index].feature = event;
												},
											},
										},
										params.row.feature.map((item) => {
											return h('Option', {
												props: {
													value: item.value,
													label: item.label,
												},
											}
											);
										})
									);
								},
							},

radio
{

	title: '条件区分',
					key: 'conditions',
					width: 180,
					render: (h, params) => {
						return h(
							'RadioGroup',
							{
								props: {},
								on: {
									'on-change': (event) => {
										this.data2[params.index].conditions = event;
									},
								},
							},
							params.row.conditions.map((item) => {
								return h('Radio', {
									props: {
										value: item.value,
										label: item.label,
									},
								});
							})
						);
					},
				},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值