1、editIndex是一种保存状态,这个定义出来只是为了方便我们对要操作那一行进行判断。
2、在render的input里的props:value和on:input相当于实现了v-model.value这个参数就是input标签里面的初始值。通过on来监听editValue的变化情况,不管修没修改最后editValue的值都是双向绑定的val参数的值。
3、为了避免实时输入的Table重绘,将input实时修改的值绑定在外部的数据中。也就是说如果每次修改就返回一个完整的data,那么表格是会重新绘制并加载的,相当于牵一发而动全局了,所以先把修改的是用一个变量存起来,也就是editValue。
4、render函数中的row和index分别就是每一行数据和其下标,下标默认是0开始。还有一个column参数,代表的是当前列数据
row展开后:
address: "New York No. 1 Lake Park"
age: 18date: "2016-10-03"
name: "John Brown"
_index: 0
_rowKey: 1
index:0
5、h相当于让其创建一个标签,例如h(“Input”)就相当于告诉浏览器渲染一个Input标签。style中写的是样式,以字典的形式书写,例如:边距,点击状态图标等。props中写的是该标签的固有属性,以字典的形式书写,例如:Icon固有属性就是type,size,color。on中写的是函数,代表监听的事件。书写形式:
click: ()=>{}
input: (val)=>{}
6、不管保存或取消都要写this.editIndex = -1,因为要回复原位嘛。
7、最重要的一点是在最后return的时候,要么返回一个列表,要么返回一个字符串,这是规定,所以这就是为什么edit和control都定义成了一个数组的原因,而在下一个项目写的是字符串。
return写法一:
return h("Row", [
h("Col", {props:{xxx}, edit}), edit是h渲染时定义的
h("Col", {props:{xxx}, control}) control是渲染时定义的
])
return写法二:return h("div", [edit]) edit是在渲染时定义的
8、前端判断全等是:===
9、h的写法:
h("Input", {
style: {}, style中不能有横线,要换成大写。例如:fontSize
props:{},
on: {
input: (val)=>{
xxx
}
}
})