封装 element ui 的el-table

Question

在做一个项目，里面有很多table，因此想封装element ui的el-table。

    <el-table :data="table.data" style="width: 100%">
      <el-table-column v-for="column in columns" :prop="column.prop" :label="column.label" :width="column.width" :formatter="column.formatter">
        <template scope="scope" v-if="column.operations"> //注意这一行
          <el-button v-for="operate in column.operations" size="small" type="danger" 
            @click="operate.func">{{operate.label}}</el-button>
        </template>
      </el-table-column>
    </el-table>

table.data的数据如下：

        [{
          operator: '大旭',
          lastOperatedAt: '2017-3-17-10:30'
        }, {
          operator: '大旭',
          lastOperatedAt: '2017-3-17-10:30'
        }]

columns的数据如下：

      [{
        label: '操作人',
        prop: 'operator',
        width: 150
      }, {
        label: '最后操作时间',
        prop: 'lastOperatedAt',
        width: 180
      }, {
        label: '操作',
        operations: [{
          label: '禁用',
          func: this.disableTag
        }, {
          label: '查看挂载人群',
          func: this.checkMountedUser
        }, {
          label: '编辑',
          func: this.editTag
        }]
      }]
      

现在的问题是数据列和操作列不能同时显示
当我在<template scope="scope">中加上scope="scope"时，不能显示数据

当我在<template>中去掉scope="scope"时，不能显示操作

Answer 1

看了一下element的源码

renderCell = () => _self.$scopedSlots.default(data);

单元格，应该只渲染scopeSlot,不渲染slot。你用v-if控制，其实只控制了scopeSlot的显示和隐藏，但是scopeSlot还是存在的。所以你去掉scope后，单元格会显示。

Answer 2

template外层的el-table-column不能有prop吧?

Answer 3

你好 <el-table ref="multipleTable" :data="formatedCartLists" border style="width: 100%" @selection-change="handleSelectionChange"></el-table>我下面想循环formatedCartLists中的products数组，在<el-table-column>怎么写循环呀

Answer 4

请问你封装的操作列的按钮的方法是如何处理的啊。在哪里声明方法呢