(1)定位修改元素
(2)通过deep进行样式修改
<style lang="scss" scoped>
/* lang="scss" 用了 scss 使用::v-depp{} 穿透修改样式
未使用scss 直接用/deep/ {修改样式}
*/
::v-deep {
/**el-table表格调整 start*/
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
height: auto;
padding: 2px 0;
}
.el-table--mini .el-table__cell {
padding: 2px;
flex: 1;
}
/**el-table表格调整 end */
}
</style>
// 不使用sass
<style scoped>
/deep/ .el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {
height: auto;
padding: 2px 0;
}
/deep/ .el-table--mini .el-table__cell {
padding: 2px;
}
</style>
<template>
<div class="content">
<el-table :data="tableData" stripe border style="width: 100%" size="mini">
<el-table-column label="序号" align="center" width="50" fixed>
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="date" label="日期" align="center" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center" width="210">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import A_Input from "@/views/components/common/A_Input.vue"; //输入框
export default {
name: "TableBase",
components: {
A_Input
},
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 弄'
}]
}
},
created() { },
mounted() { },
methods: {},
};
</script>
<style lang="scss" scoped>
::v-deep {
/**el-table表格调整 start*/
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
height: auto;
padding: 2px 0;
}
.el-table--mini .el-table__cell {
padding: 2px;
}
/**el-table表格调整 end */
}
</style>