element-ui 表头组件封装

listArr : 表

数据格式 : listArr  [

    {

key必须为tableTitleList 的prop 可以互换  : value 正常值

   }

]

tableTitleList :表单表头

数据格式 :     tableTitleList: [

​    {

​     prop: 'systemID',

​     name: '育信ID'

​    },

​    {

​     prop: 'userName',

​     name: '真实姓名'

​    },

​    {

​     prop: 'idNumber',

​     name: '证件号码'

​    }

   ],

condition 为按钮是否显示 初始化为  false
显示按钮 需传入按钮数组

  btnTitle: [

​    {

​     title: '查看',

​     name: 'look',

​     type: 'text'

​    },

​    {

​     title: '编辑',

​     name: 'edit',

​     type: 'text'

​    },

​    {

​     title: '删除',

​     name: 'delete',

​     type: 'text'

​    }

   ],

title : 显示名称  name是调用子组件的返回事件@name='fn' 即可触发事件 返回值为 下标与 对应当前行的对象数据  type :为element-ui组件的按钮对应type
使用方式
如   <组件 @look='fn'></组件>

fn (*index*, *item*) {

  // 表格行间下标 与 对应的元素对象

   console.log(*index*, *item*)

  },

conditionss 是否显示全选 默认 false
将文件放入components文件夹   在main .js 使用  

import InformationQuery from 'c/informationQuery' 

这里的c 是我在vue.config.js中重新更换的对应 components 文件夹名称 如未修改 可改为 '@/components/informationQuery'
正式调用使用  information-query 进行页面内调用

组件主内容

<template lang="">
    <div>
        <el-table :data="listArr">

                <el-table-column label="选择" type="selection" width="30" v-if="conditionss">
                </el-table-column>
                <slot name='sss'></slot>
            <el-table-column v-for="title in tableTitleList" :prop=title.prop :label="title.name" align="center"
                :key="title.prop" :index="title.index" ref="reference">
            </el-table-column>

            <el-table-column label="操作" width="150" v-if="condition">
                <template slot-scope="scope">
                    <el-button size="mini" :type="item.type" @click="$emit( item.name ,scope.$index, scope.row , $event)"  v-for="(item, index) in btnTitle" :key="index">{{item.title}}</el-button>
                    <!-- <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
// import $ from 'jquery'
export default {
  name: 'InformationQuery',
  data () {
    return {
      // ss: this.condition

    }
  },
  props: {
    listArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableTitleList: {
      type: Array,
      default: function () {
        return []
      }
    },
    condition: {
      type: Boolean,
      default: false
    },
    conditionss: {
      type: Boolean,
      default: false
    },
    btnTitle: {
      type: Array,
      default: function () {
        return []
      }
    }

  },

  updated () {
    this.$nextTick(function () {
      const elm = this.$el.querySelectorAll('.cell')
      elm.forEach(item => {
        if (item.innerHTML === '启用' || item.innerHTML === '待机构审核' || item.innerHTML === '机构审批通过') {
          item.style.color = '#67C23A'
        }
        if (item.innerHTML === '禁用') {
          item.style.color = '#F56C6C'
        }
      })
    })
  }
}
</script>
<style scoped>

.el-table
{
min-width: 1024px;
max-width: none;
}
</style>

组件导出JS

import InformationQuery from './informationQuery'
export default {
  install (Vue) {
    Vue.component(InformationQuery.name, InformationQuery)
  }
}