element 表格组件内部添加expand
2021-03-11 本文已影响0人
疯泽清
功能:个别页面需要添加expand功能,传入数据进行操作,完善table组件
(由于table组件是公用组件,避免代码耦合,不在组件内部操作数据 ,选择slot)
1.表格组件中添加具名插槽
<el-table-column v-if="expandShow" type="expand">
<template slot-scope="props">
<slot name="expand" :data="props.row" />
</template>
</el-table-column>
2.由于接口分开写,在expand打开时候进行接口请求调取内部数据
el-table上面添加事件@expand-change="expandClick"
methods中添加事件
expandClick(val, expandedRows) { //参数:当前行数据/打开关闭状态
const flag = expandedRows.length !== 0
this.$emit('expandClick', val, flag)
}
3.在父组件页面调用表格组件(其他参数不写)
<basic-table @expandClick="expandClick">
<template v-slot:expand="props">
其中为插入的内容 pros为当前行数据
</template >
</basic-table>