20行代码封装一个可配置（vue）表格组件，够了吗？我觉得还可以
组件需要传一个columns配置文件来生成对应的table，传一个data来渲染对应的数据。数据可以通过槽进行两次处理。组件设计的列为数组类型（必填）列中的每一项都是一个对象（必填）列中的每个对象应包含：title（String）：根据该key生成的head对应的th（必填）dataIndex(String):根据此key渲染对象的数据(此key与data中的key一一对应)(必填)customRender(Boolean):判断是否根据此key分配对应的slot(可选)data是数组类型（必填）data中的每一项都是一个对象，里面的key必须对应上面列的dataIndex（必须）预期用法{{文本===1?'男':'女'}}修改删除
预期效果组件的实现（这里使用JXS）首先根据上面的要求定义了两个propsprops：{columns:{type:Array,required:true},data:{type:Array,default:()=>[]}}然后根据传入的列的标题生成对应的thead//根据配置生成thead_renderHeader(h){returnh('thead',{class:'y-header'},[h('tr',{class:'y-header-row'},[this.columns.map(row=>{returnh('th',{class:['y-header-column','y-table-left']},row.title)})])])}紧接着根据列的dataIndex结合d的键值对渲染对应的数据阿塔，然后判断是否根据columns的customRender分配对应的slot//根据配置生成tbody，然后根据customRender分配scopeslot_renderBody(h){returnh('tbody',{},[this.data.map(row=>{returnh('tr',{class:'y-body-row'},[this.columns.map(item=>{returnh('td',{class:'y-body-column'},item.customRender&&this.$scopedSlots[item.dataIndex]?this.$scopedSlots[item.dataIndex](row[item.dataIndex],{...row}):row[item.dataIndex])})])})])}这里生成的slot是作用域slot，有时候是package组件神一般的存在，这里将当前值传递给slot的第一个参数，而当前行数据传递给第二个参数，所以可以这样获取外面的数据
修改Delete 