Vue二次封装复用Element Table组件

HTML

tables.vue

  <!-- 列表 -->
    <el-table
        stripe
        :border="border"
        :data="dataSource" 
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        @row-dblclick="rowClick"
        highlight-current-row
        @row-click="clickTable"
        ref="refTable"
        @expand-change="expandChange"
        >
      <!--数据源-->
      <el-table-column 
        v-for="(column, index) in columns"
        v-if="column.isShow" 
        header-align="center" 
        :sortable="column.hasSort"
        :key="column.prop"
        :prop="column.prop" 
        :label="column.label" 
        :align="column.align"
        :width="column.width">
      </el-table-column >
    </el-table>

JS

export default{
  name:"tables",
  props:{
      dataSource: {             // 表格数据源
        type: Array,
        default: ()=> []
      },
      columns: {                // 表格的字段展示
        type: Array,
        default: ()=>[]
      }
  }
}

使用组件

<tables
    :dataSource="dataSource" 
    :columns="columns" 
>
</tables>

//js
 export default {
data(){
    reutrn{
    dataSource:[], // 数据源
    columns: [{
            hasSort: false, //<Boolean> 是否排序
            isShow: true, //<Boolean> 是否展示
            prop: 'createTime', //<String>  对应属性名
            label: '日期', //<String>   表头标签
            align: 'center',
            width: 200, // 列宽
          },
          {
            hasSort: false, //<Boolean> 是否排序
            isShow: true, //<Boolean> 是否展示
            prop: 'phone', //<String>  对应属性名
            label: '手机', //<String>   表头标签
            align: 'center'
          },
          {
            hasSort: true, //<Boolean> 是否排序
            isShow: true, //<Boolean> 是否展示
            prop: 'username', //<String>  对应属性名
            label: '名字', //<String>   表头标签
            align: 'center'
          },
          {
            hasSort: true, //<Boolean> 是否排序
            isShow: true, //<Boolean> 是否展示
            prop: 'deptName', //<String>  对应属性名
            label: '部门', //<String>   表头标签
            align: 'center'
          },
          {
            hasSort: true, //<Boolean> 是否排序
            isShow: true, //<Boolean> 是否展示
            prop: 'status', //<String>  对应属性名
            label: '状态', //<String>   表头标签
            align: 'center'
          }
        ],
      

    }
  }
}