1、components下新建MyTable/index.vue
<template> <div class="my-table"> <el-table :data='tableData' :header-cell-style='headerCellStyle'> <slot></slot> </el-table> </div> </template> <script> export default { name: 'MyTable', props: { data: { type: Array, default() { return [] } } }, data() { return { tableData: [] } }, created() { this.tableData = this.data }, methods: { headerCellStyle({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0) return 'backgroundColor:red;color:#fff;' } } } </script>
2、组件中引入并使用
import MyTable from '@components/MyTable'
data() { return { 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 弄' } ] } }, components: { MyTable }
使用:
<MyTable :data="tableData"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </MyTable>
效果:
如果需要封装成全局组件:
1、MyTable下新建index.js
import MyTable from './index.vue' export default (Vue) => { Vue.component(MyTable.name, MyTable) }
2、main.js中引入并注册
import MyTable from '@components/MyTable' Vue.use(MyTable)
3、组件中不需要引入MyTable,直接使用