一、概述
iViewTableRender是基于iview ui组件的一个简化版数据表格渲染器。iViewTableRender让在iview表格组件里数据渲染变得更加简单和灵活，也让iview表格组件更加易于使用。
二、基本使用方法
iViewTableRender最基本的使用方法是在iview表格中通过scoped slots（非具名插槽）来渲染数据。以下代码为一个简单的iViewTableRender实例：
<template>
<Table :data="data">
<template slot-scope="{row}">
<iViewTableRender :row="row" :render="render">
</template>
</Table>
</template>
<script>
import iViewTableRender from '@/components/iViewTableRender'
export default {
data() {
return {
data: [{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
}]
}
},
computed: {
render() {
return {
cols: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'age'
}, {
label: '性别',
prop: 'gender'
}, {
label: '地址',
prop: 'address'
}]
}
}
},
components: {
iViewTableRender
}
}
</script>
在iViewTableRender组件中，我们通过props传递数据行row和渲染配置render。在渲染配置中，cols数组里的每个元素表示一列（column），包括列的标签（label）和要展示的数据属性（prop）。
三、列宽和对齐方式
iViewTableRender让列的宽度和对齐方式可以更加灵活地控制，以下代码演示了如何给某一列指定固定宽度和右对齐：
<template>
<Table :data="data">
<template slot-scope="{row}">
<iViewTableRender :row="row" :render="render">
</template>
</Table>
</template>
<script>
import iViewTableRender from '@/components/iViewTableRender'
export default {
data() {
return {
data: [{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
}]
}
},
computed: {
render() {
return {
cols: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'age',
width: 100,
align: 'right'
}, {
label: '性别',
prop: 'gender'
}, {
label: '地址',
prop: 'address'
}]
}
}
},
components: {
iViewTableRender
}
}
</script>
在上述代码中，我们给“年龄”列指定了宽度为100px，并设置了对齐方式为“right”。
四、自定义列渲染
iViewTableRender还支持自定义列渲染，可以根据具体需求灵活定制数据展示的形式。以下代码为一个自定义列渲染的例子，我们将“性别”列渲染为一个图标：
<template>
<Table :data="data">
<template slot-scope="{row}">
<iViewTableRender :row="row" :render="render">
</template>
</Table>
</template>
<script>
import iViewTableRender from '@/components/iViewTableRender'
import { Icon } from 'view-design'
export default {
data() {
return {
data: [{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
}]
}
},
computed: {
render() {
return {
cols: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'age'
}, {
label: '性别',
render: (h, params) => {
const gender = params.row.gender
return gender === '男' ? h(Icon, {
props: {
type: 'md-male'
}
}) : h(Icon, {
props: {
type: 'md-female'
}
})
}
}, {
label: '地址',
prop: 'address'
}]
}
}
},
components: {
iViewTableRender,
Icon
}
}
</script>
在上述代码中，我们通过render属性指定了自定义的列渲染函数。在函数中，我们根据“性别”列的值来选择渲染出不同的图标。
五、多级表头
iViewTableRender还支持多级表头，可以把相邻的单元格并列，展现复杂的表头结构。以下代码为一个多级表头的示例：
<template>
<Table :data="data">
<template slot-scope="{row}">
<iViewTableRender :row="row" :render="render">
</template>
</Table>
</template>
<script>
import iViewTableRender from '@/components/iViewTableRender'
export default {
data() {
return {
data: [{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
}]
}
},
computed: {
render() {
return {
cols: [
{
label: '基本信息',
children: [
{
label: '姓名',
prop: 'name',
width: 100
}, {
label: '年龄',
prop: 'age',
width: 100
}]
},
{
label: '附加信息',
children: [{
label: '性别',
prop: 'gender'
}, {
label: '地址',
prop: 'address'
}]
}
]
}
}
},
components: {
iViewTableRender
}
}
</script>
在上述代码中，我们通过children属性实现了多级表头。在第一级表头中，将“姓名”和“年龄”单元格并列，组成一列名为“基本信息”的表头。在第二级表头中，将“性别”和“地址”列并列，组成一列名为“附加信息”的表头。
六、可编辑表格
iViewTableRender可以配合iview的可编辑表格组件进行使用，实现较为复杂的数据录入等需求。以下代码为一个可编辑表格的实例：
<template>
<Table :data="data" :edit-config="editConfig" :row-class-name="'editable-row'">
<template slot-scope="{row, column, index}">
<iViewTableRender :row="row" :render="render" :editable="true" :edit-rules="editRules" :edit-textarea-limit="30">
</template>
</Table>
</template>
<script>
import iViewTableRender from '@/components/iViewTableRender'
export default {
data() {
return {
data: [{
name: '张三',
age: 18,
gender: '男',
address: '北京市朝阳区'
}],
editConfig: {
trigger: 'click',
mode: 'cell'
},
editRules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{
required: true,
type: 'number',
message: '请输入年龄',
trigger: 'blur'
}]
}
}
},
computed: {
render() {
return {
cols: [{
label: '姓名',
prop: 'name',
editConfig: {
rules: this.editRules.name
}
}, {
label: '年龄',
prop: 'age',
editConfig: {
rules: this.editRules.age,
inputType: 'number'
}
}, {
label: '性别',
prop: 'gender',
render: (h, params) => {
return h('RadioGroup', {
props: {
value: params.row.gender
},
on: {
'on-change': (value) => {
params.row.gender = value
}
}
}, [
h('Radio', {
props: {
label: '男'
}
}, '男'),
h('Radio', {
props: {
label: '女'
}
}, '女')
])
}
}, {
label: '地址',
prop: 'address'
}]
}
}
},
mounted() {
this.$nextTick(() => {
this.$refs.table.initTabelEdit(this.editConfig)
})
},
components: {
iViewTableRender
}
}
</script>
在上述代码中，我们通过设置editable属性为true和editRules来实现表格的可编辑性。在渲染配置中，我们给“姓名”列和“年龄”列分别设置了校验规则和输入类型。在“性别”列中，我们使用RadioGroup组件来进行数据编辑。
七、总结
通过这篇文章，我们详细了解了iViewTableRender的基本使用方法、列宽和对齐方式、自定义列渲染、多级表头、可编辑表格等方面。iViewTableRender可以简化iview表格组件的开发流程，让表格渲染变得更加易于使用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270266.html
微信扫一扫 
支付宝扫一扫 