elementUI自定义el-table头部的样式

本文主要是介绍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，直接使用

这篇关于elementUI自定义el-table头部的样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！