Vue3使用JSX封装JSON化ElementUi表格 |
您所在的位置：网站首页 › 豪爵150电喷摩托车价格 › Vue3使用JSX封装JSON化ElementUi表格 |
Vue3使用JSX封装JSON化ElementUi表格
最近刚刚好有时间，看见了之间封装的饿了么的表格，感觉之前封装的方法说实在不太理想，于是就有了重构的想法，于是就这样开始了我的重构之旅。 项目环境 "vue": "^3.2.16", "sass":"^1.43.4", "typescript":"^4.4.3" "vite" 复制代码 重构点 JSX + JSON配置生成表格 支持插槽自定义表头，列表项 封装暴露的Api跟官方文档一致 支持分页 初始化创建一个DynamicTable组件，并且配置好需要由外部传入的配置项 import {defineComponent} from "vue"; import {isEmpty} from "element-plus/es/utils/util"; export default defineComponent({ name: "DynamicTable", props: { // 父组件的实例 parentDom: Object, // 表格项 columns: { type: Array, default: () => ([]) }, // 表格的配置 options: { type: Object, default: () => ([]) }, // 操作按钮组 operations: { type: Object, default: () => ({}) }, // 表格的数据 tableData: { type: Array, default: () => ([]) }, // 分页配置 pagination:{ type:Object, default:()=>({}) } }, 复制代码可能有人会疑惑，就是parentDom这个父组件实例有什么用？其实，它最主要的作用就是让当前的子组件可以直接调用父组件的方法，避免了使用emit或者是直接将函数体传入配置所会产生的一些问题，而且因为我这里使用的是组合式APi，在setup中是无法获取到当前的this的。 如果你不明白，那么下面会慢慢说明 在开始之前，需要安装一下@vitejs/plugin-vue-jsx这个插件，然后在vite.config.js里面配置一下: import {defineConfig} from 'vite' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vueJsx({ // options are passed on to @vue/babel-plugin-jsx }), ], ... }) 复制代码 JSX + JSON配置生成表格首先我们上面定义了很多的prop，我们先来支持根据columns,options来配置和生成表格，并且将tableData传入可以展示数据，上代码： setup({columns, tableData}, ctx: any) { // 删除掉要自定义的字段 const deleteField = (column: any) => { delete column['align'] return column } return () => ( { columns.map((n: any) => { const {align}: any = n // 可以根据某一列自定义位置 const _align = align || options.align || 'center' // 删除自定义的字段 deleteField(n) return }) } ) } 复制代码然后测试一下： const columns:Array = [ {label:'姓名',prop:'name',}, {label:'性别',prop:'sex'}, {label:'年龄', prop:'num',} ] const options = { border:true, } const tableData:Array = [ {name:'1', sex:'男', num:12,}, {name:'2', sex:'男', num:12}, {name:'3', sex:'男', num:12}, ] 复制代码不出意外，他现在应该长下面这个样子
那么就上面的需求而言，个人最大的烦恼点，其实是数据应该如何交互，比如说，我自定义了某个表单项column，假如在其中定义了一个input框，那么我们是不是可以考虑这种可能性，在我修改了input框中的值之后，让表格中的数据同步变动，而不需要我们再去操作一次去修改。 当然上面只是一种可能性，还有比如下拉框,时间选择器等等这些可以随时变动数据的组件，都可以支持同步修改。那这个时候，就需要使用到引用传递这个东西了，关于引用传递大家应该都不陌生了，其实就是引用类型会发生的一个现象，那么我们传入的tableData实际上保存在里面的是对象，就可以使用这个现象来对数据进行操作了。 那么一次性解决上面的需求吧 自定义头部 + 列内容 + 操作项其实ElementUi官方已经提供了一个render-header的api来支持自定义表头，可是本人呢，就是不喜欢使用JSX或者是h函数来做这些操作，因为在配置项中添加函数，他是没办法获取到当前的实例的，而且对于vue一些api支持也不够优雅，就比如v-model，在h函数中 ，就需要自己自定义一次，关于这部分的内容官网也有说，有兴趣可以自己查找一下。那我们都用vue了，又有插槽这么一个好东西，所以我就干脆将所有的自定义操作都修改成了支持插槽使用。 自定义头部 + 列内容先来看一下我们希望怎么去使用这个自定义头部，也就是在代码中，如何编写能够节省最多的精力，不需要花费多余的时间去学习新的api，那肯定就是遵循官方文档的写法，而插槽普遍的使用方式如下： 复制代码所以，我们希望当我们去定义一个头部或者是指定列内容的时候，它能够跟上面一样使用 // 自定义 name 这个column的表格头 我是name的表头 // 自定义 name 这个column的列内容 复制代码那么为了完成可以支持这样的使用方式，我们可以使用一下slots这个变量，在setup中，它保存在ctx上下文中，然后修改的代码如下： ... export default defineComponent({ name: "DynamicTable", props: { parentDom: Object, // 表格项 columns: { type: Array, default: () => ([]) }, // 表格的配置 options: { type: Object, default: () => ([]) }, // 操作按钮组 operations: { type: Object, default: () => ({}) }, // 表格的数据 tableData: { type: Array, default: () => ([]) }, // 分页配置 pagination:{ type:Object, default:()=>({}) } }, setup({columns, tableData, options, operations, parentDom,pagination}, ctx: any) { // 删除掉要自定义的字段 const deleteField = (column: any) => { delete column['align'] return column } return () => ( { columns.map((n: any) => { const {align}: any = n // 可以根据某一列自定义位置 const _align = align || options.align || 'center' // 删除自定义的字段 deleteField(n) // 定义插槽 const slots = { default: ctx.slots[`${n.prop}_content`] ? ctx.slots[`${n.prop}_content`] : null, header: ctx.slots[`${n.prop}_header`] ? ctx.slots[`${n.prop}_header`] : null } return }) } ) } }) 复制代码然后测试一下，是否可以自定义表头，列表内容，并且可以自动修改表格项之中的内容，不出意外，现在的界面应该是
这个方式的弊端更明显，首先是当前的函数体内的this并不是父组件的实例，所以在onClick中如果想要使用到父组件的数据，那么必须在DynamicTable组件中获取到其$parent，然后回传到onClick函数中，才能调用，多余的传参不说，假如我们在Dialog中使用我们的组件的时候，其$parent获取到的压根不是我们想要的那个实例，所以到这个时候就要使用 const options = { name:{ onClick:(vm)=>{ // 在这里调用或传入父组件的方法 vm.$parent.$parent } } } 复制代码这样就很蛋疼了，又难看，又违背了简单方便使用的想法，所以最后，我采用了第三种方式，虽然也有一些问题，比如说将大批量的数据传入了另外一个组件，但是对于我们的实际使用上来说，其实不值一提。 直接将父组件的实例传入子组件 最后采用的是这种方案，既可以解决多余的调用的问题，又可以很方便的调用父组件中的方法，还不用担心函数中this的问题。 采用这种方案，需要调用函数的时候，只要在配置项中传入对应触发事件的函数名,那么我们这里还是遵循尽量跟官方文档一致的api这个想法来做，以完成多选功能来完善我们的代码 ... setup({columns, tableData, options, operations, parentDom,pagination}, ctx: any) { // 删除掉要自定义的字段 const deleteField = (column: any) => { delete column['align'] return column } // 专门拿来触发父组件的函数 // handleName:函数名 // params:传入的参数 const handleFn = (handleName:string,params:any = null) => { return parentDom && parentDom[handleName] && parentDom[handleName](params) } return () => ( handleFn(options['selection-change'],selection)} > { columns.map((n: any) => { const {align}: any = n // 可以根据某一列自定义位置 const _align = align || options.align || 'center' // 删除自定义的字段 deleteField(n) // 定义插槽 const slots = { default: ctx.slots[`${n.prop}_content`] ? ctx.slots[`${n.prop}_content`] : null, header: ctx.slots[`${n.prop}_header`] ? ctx.slots[`${n.prop}_header`] : null } return }) } {renderOperations()} { !isEmpty(pagination) && renderPagination()} ) } 复制代码其实就是当发现选项是selection的时候，就不需要el-table-column最任何操作，但是也要支持原来el-table-column的api，所以在渲染插槽的时候添加一下判断就好了，使用方式就是在columns中定义一个type:selection的对象就行了。 const columns = [ {type:'selection'} ] 复制代码那因为时间的关系，上文就先到这里啦，余下的操作项,分页其实按照以上的思路也不难做了，而这里，就在之后的下文中再详细说明吧！ 告辞 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |