elementUI自定义el-table头部的样式
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，直接使用
文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068145
页:
[1]