element-ui - 封装 element ui 的el-table

问题描述

问 题

在做一个项目，里面有很多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"时，不能显示操作

解决方案

一楼正解，如果不想拆分数据的话可以在外面包一层template用来循环渲染，DOM结构如下：

<el-table :data="table.data" style="width: 100%">
      <template v-for="column in columns">
        <el-table-column  v-if="column.operations" :prop="column.prop" :label="column.label" :width="column.width" :formatter="column.formatter">
            <template scope="scope">
              <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-column v-else :prop="column.prop" :label="column.label" :width="column.width" :formatter="column.formatter">
         </el-table-column>
      </template>
    </el-table>

这篇关于element-ui - 封装 element ui 的el-table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！