element UI table样式问题

Question

请问此效果能否用element ui table实现。 求解答

找到的网上案例 还是调不出上图效果
<template>
<el-table

:data="tableData"
:row-style="tableRowStyle"
:header-cell-style="tableHeaderColor">
<el-table-column
  property="name"
  label="姓名"
  width="120">
</el-table-column>
<el-table-column
  property="age"
  label="年龄"
  width="120">
</el-table-column>
<el-table-column
  property="sex"
  label="性别"
  width="120">
</el-table-column>

</el-table>
</template>
<script>
export default {
name: 'table',
data() {

return {
  tableData: [
    {
      name: 'Cindy',
      age: 20,
      sex: '女'
    },
    {
      name: 'Mila',
      age: 22,
      sex: '女'
    },
    {
      name: 'Bob',
      age: 23,
      sex: '男'
    }
  ]
}

},
created() {},
methods: {

// 修改table tr行的背景色
tableRowStyle({ row, rowIndex }) {
  return 'background-color: pink'
},
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 0) {
    return 'background-color: lightblue;color: #fff;font-weight: 500;'
  }
}

}
}
</script>

---

原文：https://blog.csdn.net/yanzisu...
版权声明：本文为博主原创文章，转载请附上博文链接！

Answer 1

最简单笨拙的办法就是写样式覆盖。

Answer 2

element-ui支持自定义主题

可以修改自定义的配置

自定义主题

Answer 3

你是想弄成行与行，列与列之间有间隔吗
那在这里的方法里加上margin，应该就OK的

Answer 4

可以呀, 自己详细看下文档, 在el-table 添加设置即可; 如果一栏要放多个按钮, 直接在 el-table-column 添加就可以了