JS代码如下：constcolumns=ref([{prop:'date',label:'date',},{prop:'name',label:'name',},{prop:'tag',label:'tag',},]);consttoggleColumnSort=()=>{columns.value=[...columns.value.slice(0,1),columns.value[2],columns.value[1],...columns.value.slice(3),];};上面的代码可以看到一些问题：判断太多，嵌套在一块的每一列的配置相互耦合，不利于后期维护。html代码和js代码混在一起，有利于写ElTableNext为了解决以上问题，封装了基于el-table的ElTableNext组件上面的代码可以用ElTableNext实现如下：在线Demotsx代码如下：constcolumn=ref([{prop:'date',label:'date',},{prop:'name',label:'name',render:(value,scope)=>scope.row._edit?({scope.row[scope.column.property]=val;}}/>):(value),},{prop:'tag',label:'label',渲染:(value,scope)=>scope.row._edit?({scope.row[scope.column.property]=val;}}>{tagOptions.map((option)=>())}):(<el-tagtype={scope.row.tag==='home'?'信息'：'成功'}>{value}),},]);consttoggleColumnSort=()=>{column.value=[...column.value.slice(0,1),column.value[2],column.value[1],...column.value.slice(3),];};设计原则完全兼容el-table原有的相关API、事件、方法等，并保持一致。通过JSON配置列表结构。此外，还添加了一些附加功能以提供更好的打字稿提示。所以在封装的时候，费了一番功夫，折腾了el-tabletypescript类型。例如：渲染复杂的列内容有两种方式：一种是槽Slot，另一种是render函数。对于render函数，需要启动lang="tsx"tsx对于熟悉react的开发者来说会比较熟悉。但是也失去了vue模板提供的便利。例如，v-模型。需要在model-value={value}中设置值，在onUpdate中改变值：modelValue={(val)=>{}}跳转看下面Demo:render-mode使用的本质在slot-way中使用源码封装，就是利用tsx对el-table进行封装，并提供一些额外的功能。渲染el-table-column时判断是slot还是renderfunction。总代码量，包括type-assisted代码，不超过代码的200%——代码跳转到githubElTableNext实现了官方el-table的所有demo，应该比较稳定。可以跳转查看以下Demo：https://el-table-next.vercel.app/guide/example.html其他喜欢的同学可以直接把源码放在自己的项目中，或者直接用npm安装.另外，为小伙伴们提供了PlayGround播放组件源码组件文档