最近在使用iView中的表格组件时,碰到许多坑和疑惑,仔细研究了一下table组件,发现官方文档讲的不是很清楚,本文将介绍并使用table组件,做一个动态创建表格的demo,效果如下图。
一、在columns中写render函数
查看官方文档可知,表格中主要的两个属性分别为columns和data。columns用来渲染列,data是渲染所用的数据,想在iView中插入标签,需要用它提供的render函数,这跟react的render差不多。
render函数的几个参数:
h: Render函数的别名(全名 createElement)
params: table 该行内容的对象,包含row(当前行对象)和index(当前行的序列号)
props:设置创建的标签对象的属性
style:设置创建的标签对象的样式
on:为创建的标签绑定事件
二、如何写render函数
1.插入Input
render: (h, { row, index }) => {
return h("Input", {
props: {
value: row.name
},
on: {
input: val => {
this.data[index].name = val;
}
}
});
}
这是一个插入Input框的例子。
h渲染出标签
prop设置其value为当前行的name
on添加input方法,使当前行的name为输入的值
2.插入Select
{
title: "爱好",
key: "hobby",
render: (h, { row, index }) => {
return h("Select", {
props: {
value: row.hobby
},
on: {
'on-select': val => {
this.data[index].hobby = val;
}
}
},
this.options.map(item=>{
return h('Option',{
props:{
value:item,
label:item
}
})
})
);
}
},
这是一个插入Select框的例子
将要嵌套的组件用花括号放在后面,option可通过map函数就可以代替v-for的渲染。
如果要嵌套多个组件,可以写成数组的形式。比如:
render: (h, params) => {
return h('div', [
h('Button'),
h('Button')
]);
}
三、一些常见的坑
插入Select组件的时候,如果table行数较少,会出现遮住下拉框的情况。
解决方法:在table组件上加上样式overflow: visible。
Select组件的触发事件为on-change
需要用props设置初始值,否则值不会渲染到真正的当前行。
四、完整代码
<template>
<div class="table">
<Button class="button" @click="add">Add</Button>
<Table :columns="columns" :data="data" class="table-fixbug"></Table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
columns: [
{
type: "selection",
width: 60,
align: "center"
},
{
title: "姓名",
key: "name",
render: (h, { row, index }) => {
return h("Input", {
props: {
value: row.name
},
on: {
input: val => {
this.data[index].name = val;
}
}
});
}
},
{
title: "爱好",
key: "hobby",
render: (h, { row, index }) => {
return h("Select", {
props: {
value: row.hobby
},
on: {
'on-select': val => {
this.data[index].hobby = val;
}
}
},
this.options.map(item=>{
return h('Option',{
props:{
value:item,
label:item
}
})
})
);
}
},
{
title: "职业",
key: "job",
render: (h, { row, index }) => {
return h("Input", {
props: {
value: row.job
},
on: {
input: val => {
this.data[index].job = val;
}
}
});
}
},
{
title: "operation",
key: "operation",
render: (h, { row, index }) => {
return h(
"a",
{
on: {
click: () => {
this.data.splice(index, 1);
}
}
},
"Delete"
);
}
}
],
data: [
{
name: "",
hobby: "",
job: ""
}
],
options:['电影','游戏','看书']
};
},
methods: {
add() {
const addData = {
name: "",
hobby: "",
job: ""
};
this.data.push(addData);
}
}
};
</script>
<style>
.table {
text-align: left;
}
.button {
margin-bottom: 20px;
}
.table-fixbug{
overflow: visible;
}
</style>