封装element中的table表格动态渲染（动态表头，可操控列）

vue+element实现动态表格：根据后台返回的属性名和字段动态生成表头可变表格

由于项目需求，需要有一个动态表格，可以根据配置或从后台获取表格属性列。并加上了某一行需要点击跳转和操作列里面的功能

子组件中的table封装，并接受父组件传递过来的数据

<el-table
      :data="tableData"
      id="el-table"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
      <!-- 是否显示序列号 -->
      <template v-if="indexColumn">
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
      </template>
      <!-- 动态循环的列表 -->
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width ? item.width : ''"
        :align="'left'"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-button
            v-if="item.isJump"
            type="text"
            size="small"
            :key="index"
            @click="details(scope.row)"
          >
            {{ scope.row[item.prop] }}
          </el-button>

          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <!-- 固定行 操作 -->
      <template>
        <el-table-column
          v-if="tableOption"
          :width="tableOption.width"
          :label="tableOption.label"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-for="(item, index) in tableOption.options"
              :key="index"
              @click="item.handle(scope.row)"
            >
              {{ item.label }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>

接受父组件的传值

props: {
    // 数据源
    tableData: {
      type: Array,
      default () {
        return []
      }
    },
    // 标题
    tableLabel: {
      type: Array,
      default () {
        return []
      }
    },
    // 处理常用查看,编辑
    tableOption: {
      type: Object,
      default () {
        return {}
      }
    },
    // 是否显示 序号
    indexColumn: {
      type: Boolean,
      default: () => { }
    }
  },

子组件向父组件发起调用

    // 改变默认样式
    headerCellStyle ({ row, rowIndex }) {
      return 'padding:5px 0'
    },
    // 改变默认样式
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return 'padding:5px 0'
    },
    // 点击可操作行 向父组件发起调用
    details (row) {
      this.$emit('cellClick', row)
    }

父组件

     <Table
        :table-data="tableData"
        :table-label="tableLabel"
        :table-option="tableOption"
        :selection-checked="false"
        :index-column="true"
        ref="Table"
        @cellClick="tableCellClick"
     ></Table>

父组件向子组件传递的参数 

    tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      tableOption: {
        label: '操作',
        width: '180',
        options: [
          {
            label: '添加',
            type: 'primary',
            fixed: 'right',
            handle: (row) => {
              this.add(row)
            }
          }
        ]
      },

     tableLabel: [
        { label: '日期', prop: 'date', width: '', isJump: true },
        { label: '姓名', prop: 'name', width: '' },
        { label: '地址', prop: 'address', width: '' },
      ]

父组件调用方法

    add(row) {
      console.log(row)
    },
    tableCellClick (row) {
      console.log(row)
    }