为啥要用jsx去写
因为iview Table中的render的写法如果在表格中的数据展示效果较复杂时，代码量及阅读友好度非常不尽人意。
故考虑使用jsx来实现
需要注意的点
如果使用vue-cli2.0构建的项目,使用jsx需要按 这里的方法引用包,才能使用
如果使用的vue-cli 3.0构建的,则不需要配置,直接使用即可
另外, 在webstorm中开发时可能会出现eslint语法检查报错的问题
解决办法：在script标签上添加 type='text/jsx', 如下：
render: (h, params) => {
return
}
解决方法：
export default {
data () {
return {}
}
}
具体实现
table中自定义列render中jsx写法
添加
// @ is an alias to /src
export default {
name: 'home',
data () {
return {
tableTitle: [
{
title: '姓名',
align: 'center',
render: (h, params) => {
return
onOn-change={this.modelHandler.bind(this, params, 'name')}>
}
}, {
title: '性别',
align: 'center',
render: (h, params) => {
return
}
}, {
title: '年龄',
align: 'center',
render: (h, params) => {
return
onOn-change={this.modelHandler.bind(this, params, 'age')}>
}
}, {
title: '操作',
align: 'center',
render: (h, params) => {
// 绑定的事件如果传递在methods中的话，则需要使用bind来保证运行时的this指向
// 所以 this.btnClickHandler是在渲染页面时给当列绑定事件, 之所以用this.btnClickHandler而不是btnClickHandler,是因为btnClickHandler是写在methods中。
// 如果是定义在render中。则可以 nativeOnClick={btnClickHandler}
// bind的使用是何证这我们绑定的函数在运行时this的指向是当前的实例，这样我们可以在这个方法中使用 data 中的数据
// 类似 react 中的 this.methodXXX.bind(this)
let btns = [1, 2, 3, 4].map((item) => {
return Btn-{item}
}, this)
return
{btns}
}
}
],
data: [
{
name: '张一',
age: 12,
gender: null
}, {
name: '张二',
age: 22,
gender: null
}, {
name: '张三',
age: 32,
gender: null
}, {
name: '张四',
age: 42,
gender: null
}
]
}
},
methods: {
/**
* 手动双向绑定
* @param params 当前列的数据 params.row 就是当前列
* @param key 当前列要绑定的属性名称
* @param e Dom event对象
*/
modelHandler (params, key, e) {
let v = e.target.value
console.log(params)
params.row[key] = v
},
/**
* iview 对select组件提供的on-change
* @param params
* @param v
*/
selectHandler (params, v) {
console.log(v)
params.row.gender = v
},
/**
* click 事件
* @param row
* @param v
*/
btnClickHandler (row, v) {
console.log(row, v)
}
}
}
最后效果图
image
以上就是具体的实现过程，
第一次写,如果有不对的直接指出，非常感谢
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
