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

2021-07-09 23:04:17 阅读：254 来源： 互联网

标签：el return name 自定义王小虎普陀区 elementUI MyTable 2016

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，直接使用

标签：el,return,name,自定义,王小虎,普陀区,elementUI,MyTable,2016
来源： https://www.cnblogs.com/wuqilang/p/14992761.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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