一、概述
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/zh-hk/n/270266.html
微信掃一掃 
支付寶掃一掃 