android系统定制开发在使用的虚拟表格化组件el-table-v2android系统定制开发渲染数据和组件的方法时，android系统定制开发由于官网的使用示例中只有ts或tsx版，文章则是使用js和jsx的示例及一些虚拟化表格组件的注意事项。
注意事项：
在设置columns属性时，其中的宽度字段（width）必须设置值（只能是数字类型）且每一列都要设置，不然会出现数据不显示或是只显示一列的情况。
先看效果图（数据是mockjs随机生成的）
columns属性中自定义单元格渲染器的字段是cellRenderer，类型为VueComponent/(props: CellRenderProps) => VNode
一、js方式，主要使用函数 用于创建 vnodes
这里我使用element-plus的按钮组件ElButton和标签组件ElTag做示例，方法有两种（推荐第一种）：
- 直接从UI框架中引入，然后在h函数的第一个参数中传入组件，需要注意的是，如果第一个参数直接传入字符串如’ElTag’，是渲染无效的，普通的html标签是可以的，第三个参数如果传入的数据是字符串文本，控制台会有警告信息，提示换为函数形式更佳，示例：
import { ref, h } from "vue";import { ElMessageBox, ElMessage, ElButton ,ElTag} from "element-plus";//columns 是一个数组，里面的值为每一列的配置信息const columns = [{ key: "release_status", dataKey: "release_status", title: "发放状态", width: 80, cellRenderer: ({ cellData }) => h( ElTag,//这里不能写成字符串'ElTag'，如果是普通的html标签如'div'，则可以。 { type: cellData == "可发放" ? "success" : "danger" }, { default: () => cellData }//也可以写成字符串如'这是标签内容'，但控制台会有警告 ) } ]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 使用vue的 ，需要element-plus全局引入
import { ref, h, resolveComponent } from "vue";const ElButton = resolveComponent("ElButton");const ElTag = resolveComponent("ElTag");//cellRenderer函数代码同上- 1
- 2
- 3
- 4
完整代码如下：
<template> <div class=""> <div class="title">虚拟化表格示例</div> <el-divider></el-divider> <div style="width: 100%; height: 500px"> <el-auto-resizer> <template #default="{ height, width }"> <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" :row-class="tableRowClassName" fixed /> </template> </el-auto-resizer> </div> <div style="margin-top: 10px"> 共 <el-link type="primary" style="font-size: 20px">{{ tableData.length }}</el-link> 条数据 </div> </div></template><script setup>import { ref, h, resolveComponent } from "vue";import { ElMessageBox, ElMessage,ElButton,ElTag} from "element-plus";import { request } from "../../api/request";//方式二// const ElButton = resolveComponent("ElButton");// const ElTag = resolveComponent("ElTag");const tableData = ref([]);//获取表格数据（mockjs生成）的方法const getApiData = () => { request("table2").then((res) => { tableData.value = res.data; });};getApiData();//columns 是一个数组，里面的值为每一列的配置信息const columns = [ { key: "id", dataKey: "id",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id title: "id",//显示在单元格表头的文本 width: 80,//当前列的宽度，必须设置 fixed: true,//是否固定列 }, { key: "name", dataKey: "name",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填name title: "姓名", width: 100, fixed: true, }, { key: "id_number", dataKey: "id_number", title: "证件号码", width: 180, }, { key: "department", dataKey: "department", title: "部门", minWidth: 100, width: 110, }, { key: "position", dataKey: "position", title: "职位", width: 140, }, { key: "grade", dataKey: "grade", title: "等级", width: 120, }, { key: "release_status", dataKey: "release_status", title: "发放状态", width: 80, cellRenderer: ({ cellData }) => h( ElTag, { type: cellData == "可发放" ? "success" : "danger" }, { default: () => cellData } ), }, { key: "handle", title: "操作", width: 100, align: "center", cellRenderer: (data) => h( ElButton, { onClick: () => handleDelete(data), type: "danger", icon: "Delete" }, { default: () => "删除" } ), },];//自定义渲染带状态的表格（每隔一行显示不同的背景色）const tableRowClassName = ({ row, rowIndex }) => { let step = 4; for (let i in tableData.value) { if (rowIndex === step * i - 3) { return "warning-row"; } if (rowIndex === step * i - 1) { return "success-row"; } } return "";};//删除操作const handleDelete = (data) => { ElMessageBox.confirm(`确定删除 ${data.rowData.name}?`, "提 示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { tableData.value.splice(data.rowIndex, 1); ElMessage({ type: "success", message: "删除成功", }); }) .catch(() => { ElMessage({ type: "info", message: "取消删除", }); });};</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
二、 jsx方式
由于vite搭建的项目默认不支持jsx，需要先安装@vitejs/plugin-vue-jsx插件并在vite.config.js中配置：
//yarnyarn add @vitejs/plugin-vue-jsx -D//npmnpm install @vitejs/plugin-vue-jsx -D- 1
- 2
- 3
- 4
vite.config.js配置
import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({ plugins: [vue(),vueJsx()] }）- 1
- 2
- 3
- 4
- 5
- 6
- 7
使用jsx的方式就比较简捷了，需要在script标签设置lang属性等于jsx，在cellRenderer函数中可以直接使用jsx的语法和UI组件（还有自定义组件），完整代码示例如下：
<template> <div class=""> <div class="title">虚拟化表格示例</div> <el-divider></el-divider> <div style="width: 100%; height: 500px"> <el-auto-resizer> <template #default="{ height, width }"> <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" :row-class="tableRowClassName" fixed /> </template> </el-auto-resizer> </div> <div style="margin-top: 10px"> 共 <el-link type="primary" style="font-size: 20px">{{ tableData.length }}</el-link> 条数据 </div> </div></template><script lang="jsx" setup>import { ref } from "vue";import { ElMessageBox, ElMessage } from "element-plus";import { request } from "../../api/request";const tableData = ref([]);//获取表格数据的方法const getApiData = () => { request("table2").then((res) => { tableData.value = res.data; });};getApiData();const columns = [ { key: "id", dataKey: "id", //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id title: "id", //显示在单元格表头的文本 width: 80, //当前列的宽度，必须设置 fixed: true, //是否固定列 }, { key: "name", dataKey: "name", //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填name title: "姓名", width: 100, fixed: true, }, { key: "id_number", dataKey: "id_number", title: "证件号码", width: 180, }, { key: "department", dataKey: "department", title: "部门", minWidth: 100, width: 110, }, { key: "position", dataKey: "position", title: "职位", width: 140, }, { key: "grade", dataKey: "grade", title: "等级", width: 120, }, { key: "release_status", dataKey: "release_status", title: "发放状态", width: 80, cellRenderer: ({ cellData }) => ( <el-tag type={cellData == "可发放" ? "success" : "danger"}> {cellData} </el-tag> ), }, { key: "handle", title: "操作", width: 100, align: "center", cellRenderer: (data) => ( <> <el-button type="danger" icon="Delete" onClick={handleDelete.bind(this, data)} > 删除 </el-button> </> ), },];//自定义渲染带状态的表格（每隔一行显示不同的背景色）const tableRowClassName = ({ row, rowIndex }) => { let step = 4; for (let i in tableData.value) { if (rowIndex === step * i - 3) { return "warning-row"; } if (rowIndex === step * i - 1) { return "success-row"; } } return "";};//删除操作const handleDelete = (data) => { ElMessageBox.confirm(`确定删除 ${data.rowData.name}?`, "提 示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { tableData.value.splice(data.rowIndex, 1); ElMessage({ type: "success", message: "删除成功", }); }) .catch(() => { ElMessage({ type: "info", message: "取消删除", }); });};</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145