mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(advance-table): scss refactor use bem

Browse Source
This commit is contained in:
JiwenBai 2019-09-05 19:17:17 +08:00 committed by 07akioni
parent d4d735bd9b
commit bf09af2008
3 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/readme.js
View File

@ -279,8 +279,8 @@ Vue.use(naiveUi)
<td></td>
</tr>
<tr>
<td>Time</td>
<td style="text-align:center;">🚧</td>
<td>LoadingBar</td>
<td style="text-align:center;">😍</td>
<td style="text-align:center;"></td>
<td></td>
</tr>

10
packages/common/AdvanceTable/src/main.vue
View File

@ -1,16 +1,16 @@
<template>
<div
ref="tableWrapper"
class="n-advance-tabel__wrapper"
class="n-advance-table__wrapper n-advance-table"
>
<div class="n-advance-table__operation">
<div class="n-advance-table__operation__left">
<div class="n-advance-table__operation--left">
<slot name="table-operation-batch-left" />
<section class="n-advance-table__operation__bacth" />
<slot name="table-operation-batch-right" />
</div>
<div
class="n-advance-table__operation__right"
class="n-advance-table__operation--right"
:style="search ? 'margin-bottom: 18px;' : ''"
>
<slot name="table-operation" />
@ -164,7 +164,7 @@
<!-- 分页 -->
<div
v-if="pagination !== false && showingData.length"
class="n-advanced-table__pagination"
class="n-advance-table__pagination"
>
<n-pagination
v-model="currentPage"
@ -479,7 +479,7 @@ export default {
computeTdClass (column, params) {
let className = []
if (column.ellipsis) {
className.push('n-advanced-table__td-text-ellipsis')
className.push('n-advanced-table__td-text--ellipsis')
}
if (!column.className) {
return className

95
styles/AdvancedTable.scss
View File

@ -1,16 +1,56 @@
@import "./mixins/mixins.scss";
@import "./theme/default.scss";
// TODO: 滚动条
.n-advance-tabel__wrapper {
width: 100%;
// overflow: hidden;
.n-advance-table__tbody {
@include b(advance-table){
@include e(wrapper){
width: 100%;
}
@include e(tbody){
overflow: hidden;
border-radius: 12px;
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
}
.n-table {
@include e(td-text){
&-center{
text-align: center;
}
&-left{
text-align: left;
}
&-right{
text-align: right;
}
@include m(ellipsis){
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&>*{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
@include e(no-data-tip){
padding: 5px;
text-align: center;
width: 100%;
display: table-cell;
}
@include e(pagination){
margin-top: 27px;
display: flex;
justify-content: flex-end;
}
@include e(operation){
display: flex;
justify-content:space-between;
&--right,&--left{
display: flex;
}
}
@include b(table) {
// background-color: #2b3147;
table {
word-wrap: break-word;
@ -41,43 +81,4 @@
padding-left: 32px;
}
}
.n-advanced-table__td-text-ellipsis{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.n-advanced-table__td-text-ellipsis>*{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.n-advanced-table__td-text{
&-center{
text-align: center;
}
&-left{
text-align: left;
}
&-right{
text-align: right;
}
}
.n-advanced-table__pagination {
margin-top: 27px;
display: flex;
justify-content: flex-end;
}
.n-advance-table__operation {
display: flex;
justify-content:space-between;
}
.n-advance-table__operation__right,.n-advance-table__operation__left {
display: flex;
}
.n-no-data-tip {
padding: 5px;
text-align: center;
width: 100%;
display: table-cell;
}
}
}