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>

    套表格的话  v-slot="{row}" 传递当前行数据

上一篇下一篇

猜你喜欢

热点阅读