二次封装el-table
时间: 2023-10-10 12:05:33 浏览: 230
ElementUI Table二次封装
二次封装el-table是将el-table组件进行定制化,以适应具体的业务需求。在给出的引用中,使用了yxt-table.vue作为一个例子进行说明。
在yxt-table.vue中,el-table被封装为一个名为yxtTable的组件。yxtTable组件接受三个props:apiUrl、tableColumn和otherConfig。其中,apiUrl是一个函数,用于获取列表数据;tableColumn是一个数组,用于定义自定义列配置;otherConfig是一个对象,用于设置其他配置项。
在yxtTable组件的template中,可以看到el-table的使用方式。通过v-for循环遍历tableColumn数组,动态生成el-table-column,根据item.prop设置prop属性,item.label设置label属性。
在yxtTable组件的script中,created生命周期钩子中调用了getData方法来获取列表数据。getData方法内部使用了apiUrl函数来发送请求,并将返回的数据赋值给tableData。
通过这样的二次封装,可以方便地使用yxtTable组件来展示el-table,并根据具体的业务需求进行配置定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
阅读全文