vue elementUI去掉某个表格边框 修改el-table样式

vue elementUI去掉某个表格边框 修改el-table样式

1.仅改变某个表格样式，不改变其他表格样式。给el-table添加 class=“company-table”

      <el-table :data="tableData" :show-header="false" class="company-table">
        <el-table-column prop="name" label="公司"/>
        <el-table-column prop="" label="操作" width="90" />
      </el-table>

样式如下

方法一：在style中添加scoped时，需要添加深度选择器::v-deep才能改变样式

<style lang="scss" scoped>
	::v-deep .company-table td,
	::v-deep .company-table th.is-leaf {
	  border-bottom: 1px solid transparent;
	}
</style>

方法二：直接在把样式写在style中，不需要添加scoped

<style lang="scss">
	.company-table td,
	.company-table th.is-leaf {
	  border-bottom: 1px solid transparent;
	}
</style>

2.改变表格样式（全局）

    <el-table :data="tableData" :show-header="false" >
        <el-table-column prop="name" label="公司"/>
        <el-table-column prop="" label="操作" width="90" />
      </el-table>

<style lang="scss">
	.el-table td,
	.el-table th.is-leaf {
	  border-bottom: 1px solid transparent;
	}
</style>

以上element-ui的版本： “element-ui”: “^2.13.2”,

注：深度选择器可用 /deep/ ，由element-ui的版本决定