table.scss 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326
  1. /**Variable**/
  2. @import './helpers/mixin.scss';
  3. @import './base/checked.scss';
  4. @import './base/common.scss';
  5. @import './loading.scss';
  6. %DefaultColumnHeight {
  7. height: $vxe-table-row-height-default;
  8. }
  9. %MediumColumnHeight {
  10. height: $vxe-table-row-height-medium;
  11. }
  12. %SmallColumnHeight {
  13. height: $vxe-table-row-height-small;
  14. }
  15. %MiniColumnHeight {
  16. height: $vxe-table-row-height-mini;
  17. }
  18. .vxe-table-slots,
  19. .vxe-table--file-form {
  20. display: none;
  21. }
  22. .vxe-table--print-frame {
  23. position: fixed;
  24. bottom: -100%;
  25. left: -100%;
  26. height: 0;
  27. width: 0;
  28. border: 0;
  29. }
  30. .vxe-table--body-wrapper {
  31. scroll-behavior: auto;
  32. }
  33. .vxe-table--body-wrapper,
  34. .vxe-table--fixed-left-body-wrapper,
  35. .vxe-table--fixed-right-body-wrapper {
  36. overflow-y: auto;
  37. overflow-x: auto;
  38. }
  39. /*默认的渲染*/
  40. .vxe-cell,
  41. .vxe-table--filter-wrapper {
  42. .vxe-default-input,
  43. .vxe-default-textarea {
  44. background-color: $vxe-table-body-background-color;
  45. }
  46. .vxe-default-input,
  47. .vxe-default-textarea,
  48. .vxe-default-select {
  49. outline: 0;
  50. padding: 0 2px;
  51. width: 100%;
  52. color: $vxe-table-font-color;
  53. border-radius: $vxe-border-radius;
  54. border: 1px solid $vxe-input-border-color;
  55. &:focus {
  56. border: 1px solid $vxe-primary-color;
  57. }
  58. &[disabled] {
  59. cursor: not-allowed;
  60. background-color: $vxe-input-disabled-background-color;
  61. }
  62. }
  63. .vxe-default-input,
  64. .vxe-default-textarea,
  65. .vxe-default-select {
  66. height: $vxe-input-height-default;
  67. }
  68. .vxe-default-input {
  69. &[type="date"]::-webkit-inner-spin-button {
  70. margin-top: 4px;
  71. }
  72. &[type="date"]::-webkit-inner-spin-button,
  73. &[type="number"]::-webkit-inner-spin-button {
  74. height: 24px;
  75. }
  76. &::placeholder {
  77. color: $vxe-input-placeholder-color;
  78. }
  79. }
  80. .vxe-default-textarea {
  81. resize: none;
  82. vertical-align: middle;
  83. }
  84. .vxe-input,
  85. .vxe-textarea,
  86. .vxe-select {
  87. width: 100%;
  88. display: block;
  89. }
  90. .vxe-input > .vxe-input--inner,
  91. .vxe-textarea > .vxe-textarea--inner {
  92. padding: 0 2px;
  93. }
  94. .vxe-textarea--inner,
  95. .vxe-default-textarea {
  96. resize: none;
  97. }
  98. }
  99. .vxe-table--checkbox-range,
  100. .vxe-table--cell-main-area,
  101. .vxe-table--cell-extend-area,
  102. .vxe-table--cell-active-area,
  103. .vxe-table--cell-copy-area {
  104. display: none;
  105. position: absolute;
  106. pointer-events: none;
  107. z-index: 1;
  108. }
  109. .vxe-table--fixed-left-wrapper,
  110. .vxe-table--fixed-right-wrapper {
  111. .vxe-table--checkbox-range,
  112. .vxe-table--cell-main-area,
  113. .vxe-table--cell-extend-area,
  114. .vxe-table--cell-active-area,
  115. .vxe-table--cell-copy-area {
  116. z-index: 2;
  117. }
  118. }
  119. .vxe-table--fixed-left-wrapper {
  120. .vxe-table--cell-main-area,
  121. .vxe-table--cell-extend-area,
  122. .vxe-table--cell-active-area {
  123. &[half="1"] {
  124. border-right: 0;
  125. }
  126. }
  127. .vxe-table--cell-copy-area {
  128. &[half="1"] {
  129. background-size: $vxe-table-cell-copy-area-border-width 12px, 0 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width;
  130. }
  131. }
  132. }
  133. .vxe-table--fixed-right-wrapper {
  134. .vxe-table--cell-main-area,
  135. .vxe-table--cell-extend-area,
  136. .vxe-table--cell-active-area {
  137. &[half="1"] {
  138. border-left: 0;
  139. }
  140. }
  141. .vxe-table--cell-copy-area {
  142. &[half="1"] {
  143. background-size: 0 12px, $vxe-table-cell-copy-area-border-width 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width;
  144. }
  145. }
  146. }
  147. /*复选框-范围选择*/
  148. .vxe-table--checkbox-range {
  149. background-color: $vxe-table-checkbox-range-background-color;
  150. border: $vxe-table-checkbox-range-border-width solid $vxe-table-checkbox-range-border-color;
  151. }
  152. .vxe-table--cell-area {
  153. height: 0;
  154. font-size: 0;
  155. display: none;
  156. & > .vxe-table--cell-main-area {
  157. background-color: $vxe-table-cell-area-background-color;
  158. border: $vxe-table-cell-area-border-width solid $vxe-table-cell-area-border-color;
  159. }
  160. .vxe-table--cell-main-area-btn {
  161. display: none;
  162. position: absolute;
  163. right: -1px;
  164. bottom: -1px;
  165. width: 7px;
  166. height: 7px;
  167. border-style: solid;
  168. border-color: $vxe-table-cell-main-area-extension-border-color;
  169. border-width: 1px 0 0 1px;
  170. background-color: $vxe-table-cell-main-area-extension-background-color;
  171. pointer-events: auto;
  172. cursor: crosshair;
  173. }
  174. .vxe-table--cell-extend-area {
  175. border: $vxe-table-cell-extend-area-border-width solid $vxe-table-cell-extend-area-border-color;
  176. }
  177. }
  178. @keyframes moveCopyCellBorder {
  179. from {
  180. }
  181. to {
  182. background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  183. }
  184. }
  185. .vxe-table--cell-copy-area {
  186. background: linear-gradient(0deg, transparent 6px, $vxe-table-cell-copy-area-border-color 6px) repeat-y,
  187. linear-gradient(0deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-y,
  188. linear-gradient(90deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-x,
  189. linear-gradient(90deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-x;
  190. background-size: $vxe-table-cell-copy-area-border-width 12px, $vxe-table-cell-copy-area-border-width 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width;
  191. background-position: 0 0, 100% 0, 0 0, 0 100%;
  192. animation: moveCopyCellBorder .5s infinite linear;
  193. }
  194. .vxe-table--cell-active-area {
  195. border: $vxe-table-cell-active-area-border-width solid $vxe-table-cell-active-area-border-color;
  196. }
  197. .vxe-table--cell-multi-area {
  198. & > .vxe-table--cell-main-area {
  199. background-color: $vxe-table-cell-area-background-color;
  200. }
  201. }
  202. /*圆角*/
  203. @if $vxe-table-border-radius {
  204. .vxe-table--render-default {
  205. &.is--round {
  206. %AllRadius {
  207. border-radius: $vxe-table-border-radius;
  208. }
  209. %TopRadius {
  210. border-radius: $vxe-table-border-radius $vxe-table-border-radius 0 0;
  211. }
  212. %TopLeftRadius {
  213. border-radius: $vxe-table-border-radius 0 0 0;
  214. }
  215. %TopRightRadius {
  216. border-radius: 0 $vxe-table-border-radius 0 0;
  217. }
  218. %BottomRadius {
  219. border-radius: 0 0 $vxe-table-border-radius $vxe-table-border-radius;
  220. }
  221. %BottomLeftRadius {
  222. border-radius: 0 0 0 $vxe-table-border-radius;
  223. }
  224. %BottomRightRadius {
  225. border-radius: 0 0 $vxe-table-border-radius 0;
  226. }
  227. @extend %AllRadius;
  228. .vxe-table--border-line {
  229. @extend %AllRadius;
  230. }
  231. &.is--header {
  232. &:not(.is--footer) {
  233. .vxe-table--body-wrapper {
  234. &.fixed-left--wrapper {
  235. @extend %BottomLeftRadius;
  236. }
  237. &.body--wrapper {
  238. @extend %BottomRadius;
  239. }
  240. &.fixed-right--wrapper {
  241. @extend %BottomRightRadius;
  242. }
  243. }
  244. }
  245. .vxe-table--header-wrapper {
  246. &.fixed-left--wrapper {
  247. @extend %TopLeftRadius;
  248. }
  249. &.body--wrapper {
  250. @extend %TopRadius;
  251. }
  252. &.fixed-right--wrapper {
  253. @extend %TopRightRadius;
  254. }
  255. }
  256. }
  257. &:not(.is--header) {
  258. &:not(.is--footer) {
  259. .vxe-table--body-wrapper {
  260. &.body--wrapper {
  261. @extend %AllRadius;
  262. }
  263. }
  264. }
  265. }
  266. &.is--footer {
  267. &:not(.is--header) {
  268. .vxe-table--body-wrapper {
  269. &.fixed-left--wrapper {
  270. @extend %BottomLeftRadius;
  271. }
  272. &.body--wrapper {
  273. @extend %TopRadius;
  274. }
  275. &.fixed-right--wrapper {
  276. @extend %BottomRightRadius;
  277. }
  278. }
  279. }
  280. .vxe-table--footer-wrapper {
  281. &.fixed-left--wrapper {
  282. @extend %BottomLeftRadius;
  283. }
  284. &.body--wrapper {
  285. @extend %BottomRadius;
  286. }
  287. &.fixed-right--wrapper {
  288. @extend %BottomRightRadius;
  289. }
  290. }
  291. }
  292. }
  293. }
  294. }
  295. /*header*/
  296. .vxe-table {
  297. .vxe-table--header-wrapper {
  298. color: $vxe-table-header-font-color;
  299. .vxe-table--header-border-line {
  300. position: absolute;
  301. left: 0;
  302. bottom: 0;
  303. height: 0;
  304. border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
  305. }
  306. }
  307. /*排序*/
  308. .vxe-cell--sort {
  309. width: 1.5em;
  310. height: 1.35em;
  311. vertical-align: middle;
  312. text-align: center;
  313. display: inline-block;
  314. position: relative;
  315. }
  316. .vxe-sort--asc-btn,
  317. .vxe-sort--desc-btn {
  318. position: absolute;
  319. left: 0.2em;
  320. color: $vxe-table-column-icon-border-color;
  321. width: 1em;
  322. text-align: center;
  323. height: 0.8em;
  324. line-height: 0.8em;
  325. cursor: pointer;
  326. &:hover {
  327. color: $vxe-table-font-color;
  328. }
  329. &.sort--active {
  330. color: $vxe-primary-color;
  331. }
  332. }
  333. .vxe-sort--asc-btn {
  334. top: -0.1em;
  335. }
  336. .vxe-sort--desc-btn {
  337. bottom: -0.2em;
  338. }
  339. }
  340. .vxe-header--column {
  341. position: relative;
  342. font-weight: $vxe-table-header-font-weight;
  343. // user-select: none;
  344. &.col--ellipsis {
  345. & > .vxe-cell {
  346. display: flex;
  347. align-items: center;
  348. .vxe-cell--title {
  349. overflow: hidden;
  350. text-overflow: ellipsis;
  351. white-space: nowrap;
  352. }
  353. & > i,
  354. & > span {
  355. &:not(.vxe-cell--title) {
  356. flex-shrink: 0;
  357. }
  358. }
  359. }
  360. }
  361. .vxe-cell--required-icon {
  362. display: inline-block;
  363. color: $vxe-table-validate-error-color;
  364. width: 0.8em;
  365. height: 1em;
  366. line-height: 1em;
  367. font-family: $vxe-icon-font-family;
  368. font-weight: normal;
  369. position: relative;
  370. &:before {
  371. content: "*";
  372. position: absolute;
  373. left: 0;
  374. top: 0.2em;
  375. }
  376. }
  377. // .vxe-cell--required-icon,
  378. // .vxe-cell--edit-icon,
  379. // .vxe-cell-help-icon,
  380. // .vxe-cell--title {
  381. // vertical-align: middle;
  382. // }
  383. .vxe-cell--required-icon {
  384. margin-right: 0.1em;
  385. }
  386. .vxe-cell--edit-icon,
  387. .vxe-cell-help-icon {
  388. margin-right: 0.2em;
  389. }
  390. .vxe-cell-help-icon {
  391. cursor: help;
  392. }
  393. .vxe-resizable {
  394. position: absolute;
  395. right: -7px;
  396. bottom: 0;
  397. width: 14px;
  398. height: 100%;
  399. text-align: center;
  400. z-index: 1;
  401. cursor: col-resize;
  402. &.is--line {
  403. &:before,
  404. &:after {
  405. content: "";
  406. display: inline-block;
  407. vertical-align: middle;
  408. }
  409. &:before {
  410. width: 1px;
  411. height: 50%;
  412. background-color: $vxe-table-resizable-line-color;
  413. }
  414. &:after {
  415. width: 0;
  416. height: 100%;
  417. }
  418. }
  419. }
  420. }
  421. .vxe-table--fixed-right-wrapper {
  422. .vxe-header--column {
  423. .vxe-resizable {
  424. right: auto;
  425. left: -7px;
  426. }
  427. }
  428. }
  429. /*table*/
  430. .vxe-table--render-default {
  431. position: relative;
  432. font-size: $vxe-font-size;
  433. color: $vxe-table-font-color;
  434. font-family: $vxe-font-family;
  435. direction: ltr;
  436. .vxe-table--body-wrapper {
  437. background-color: $vxe-table-body-background-color;
  438. }
  439. .vxe-table--footer-wrapper {
  440. background-color: $vxe-table-footer-background-color;
  441. }
  442. .vxe-table--header,
  443. .vxe-table--body,
  444. .vxe-table--footer {
  445. border: 0;
  446. border-spacing: 0;
  447. border-collapse: separate;
  448. table-layout: fixed;
  449. }
  450. .vxe-table--header-wrapper,
  451. .vxe-table--footer-wrapper {
  452. overflow-x: hidden;
  453. overflow-y: hidden;
  454. }
  455. &:not(.is--empty) {
  456. &.is--footer {
  457. &.is--scroll-x {
  458. .vxe-table--body-wrapper {
  459. overflow-x: scroll;
  460. }
  461. }
  462. }
  463. }
  464. .vxe-body--row {
  465. &.row--stripe {
  466. background-color: $vxe-table-row-striped-background-color;
  467. }
  468. &.row--radio {
  469. background-color: $vxe-table-row-radio-checked-background-color;
  470. }
  471. &.row--checked {
  472. background-color: $vxe-table-row-checkbox-checked-background-color;
  473. }
  474. &.row--current {
  475. background-color: $vxe-table-row-current-background-color;
  476. }
  477. &.row--hover {
  478. background-color: $vxe-table-row-hover-background-color;
  479. &.row--stripe {
  480. background-color: $vxe-table-row-hover-striped-background-color;
  481. }
  482. &.row--radio {
  483. background-color: $vxe-table-row-hover-radio-checked-background-color;
  484. }
  485. &.row--checked {
  486. background-color: $vxe-table-row-hover-checkbox-checked-background-color;
  487. }
  488. &.row--current {
  489. background-color: $vxe-table-row-hover-current-background-color;
  490. }
  491. }
  492. }
  493. // &.is--tree-line {
  494. // .vxe-body--row {
  495. // &.row--stripe {
  496. // .vxe-tree--btn-wrapper {
  497. // background-color: $vxe-table-row-striped-background-color;
  498. // }
  499. // }
  500. // &.row--radio {
  501. // .vxe-tree--btn-wrapper {
  502. // background-color: $vxe-table-row-radio-checked-background-color;
  503. // }
  504. // }
  505. // &.row--checked {
  506. // .vxe-tree--btn-wrapper {
  507. // background-color: $vxe-table-row-checkbox-checked-background-color;
  508. // }
  509. // }
  510. // &.row--current {
  511. // .vxe-tree--btn-wrapper {
  512. // background-color: $vxe-table-row-current-background-color;
  513. // }
  514. // }
  515. // &.row--hover {
  516. // .vxe-tree--btn-wrapper {
  517. // background-color: $vxe-table-row-hover-background-color;
  518. // }
  519. // &.row--stripe {
  520. // .vxe-tree--btn-wrapper {
  521. // background-color: $vxe-table-row-hover-striped-background-color;
  522. // }
  523. // }
  524. // &.row--radio {
  525. // .vxe-tree--btn-wrapper {
  526. // background-color: $vxe-table-row-hover-radio-checked-background-color;
  527. // }
  528. // }
  529. // &.row--checked {
  530. // .vxe-tree--btn-wrapper {
  531. // background-color: $vxe-table-row-hover-checkbox-checked-background-color;
  532. // }
  533. // }
  534. // &.row--current {
  535. // .vxe-tree--btn-wrapper {
  536. // background-color: $vxe-table-row-hover-current-background-color;
  537. // }
  538. // }
  539. // }
  540. // }
  541. // }
  542. &.drag--resize {
  543. .vxe-table--main-wrapper,
  544. .vxe-table--fixed-left-wrapper,
  545. .vxe-table--fixed-right-wrapper {
  546. * {
  547. cursor: col-resize;
  548. }
  549. }
  550. }
  551. &.drag--range,
  552. &.drag--area {
  553. .vxe-table--main-wrapper,
  554. .vxe-table--fixed-left-wrapper,
  555. .vxe-table--fixed-right-wrapper {
  556. * {
  557. cursor: default;
  558. }
  559. }
  560. }
  561. &.drag--extend-range {
  562. .vxe-table--main-wrapper,
  563. .vxe-table--fixed-left-wrapper,
  564. .vxe-table--fixed-right-wrapper {
  565. * {
  566. cursor: crosshair;
  567. }
  568. }
  569. }
  570. &.column--highlight {
  571. .vxe-header--column {
  572. &:not(.col--seq) {
  573. &:hover {
  574. background-color: $vxe-table-column-hover-background-color;
  575. }
  576. }
  577. }
  578. }
  579. &.cell--area {
  580. .vxe-table--main-wrapper {
  581. user-select: none;
  582. }
  583. }
  584. .vxe-header--column,
  585. .vxe-body--column,
  586. .vxe-footer--column {
  587. position: relative;
  588. line-height: $vxe-table-row-line-height;
  589. text-align: left;
  590. &:not(.col--ellipsis) {
  591. padding: $vxe-table-column-padding-default;
  592. }
  593. &.col--current {
  594. background-color: $vxe-table-column-current-background-color;
  595. // .vxe-tree--btn-wrapper {
  596. // background-color: $vxe-table-column-current-background-color;
  597. // }
  598. }
  599. &.col--center {
  600. text-align: center;
  601. }
  602. &.col--right {
  603. text-align: right;
  604. }
  605. }
  606. // &.is--tree-line {
  607. // .vxe-header--column,
  608. // .vxe-body--column,
  609. // .vxe-footer--column {
  610. // &.col--current {
  611. // .vxe-tree--btn-wrapper {
  612. // background-color: $vxe-table-column-current-background-color;
  613. // }
  614. // }
  615. // }
  616. // }
  617. .vxe-header--column,
  618. .vxe-footer--column {
  619. &.col--ellipsis {
  620. &.col--center {
  621. .vxe-cell{
  622. justify-content: center;
  623. }
  624. }
  625. &.col--right {
  626. .vxe-cell{
  627. justify-content: flex-end;
  628. }
  629. }
  630. }
  631. }
  632. .vxe-body--column {
  633. &.col--checkbox {
  634. user-select: none;
  635. }
  636. }
  637. /*边框*/
  638. .vxe-table--footer-wrapper {
  639. border-top: $vxe-table-border-width solid $vxe-table-border-color;
  640. }
  641. &.border--default,
  642. &.border--full,
  643. &.border--outer {
  644. .vxe-table--header-wrapper {
  645. background-color: $vxe-table-header-background-color;
  646. }
  647. }
  648. &.border--default,
  649. &.border--inner {
  650. .vxe-header--column,
  651. .vxe-body--column,
  652. .vxe-footer--column {
  653. background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color);
  654. background-repeat: no-repeat;
  655. background-size: 100% $vxe-table-border-width;
  656. background-position: right bottom;
  657. }
  658. }
  659. &.border--full {
  660. .vxe-header--column,
  661. .vxe-body--column,
  662. .vxe-footer--column {
  663. background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color), linear-gradient($vxe-table-border-color, $vxe-table-border-color);
  664. background-repeat: no-repeat;
  665. background-size: $vxe-table-border-width 100%, 100% $vxe-table-border-width;
  666. background-position: right top, right bottom;
  667. }
  668. .vxe-table--fixed-left-wrapper {
  669. // border-right: 1px solid $vxe-table-border-color;
  670. .vxe-body--column{
  671. border-right-color: $vxe-table-border-color;
  672. }
  673. }
  674. }
  675. &.border--default,
  676. &.border--full,
  677. &.border--outer,
  678. &.border--inner {
  679. .vxe-table--header-wrapper {
  680. .vxe-header--row {
  681. &:last-child {
  682. .vxe-header--gutter {
  683. background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color);
  684. background-repeat: no-repeat;
  685. background-size: 100% $vxe-table-border-width;
  686. background-position: right bottom;
  687. }
  688. }
  689. }
  690. }
  691. }
  692. &.border--inner,
  693. &.border--none {
  694. .vxe-table--header-wrapper {
  695. background-color: $vxe-table-body-background-color;
  696. }
  697. .vxe-table--fixed-left-wrapper {
  698. border-right: 0;
  699. }
  700. }
  701. &.border--inner {
  702. .vxe-table--border-line {
  703. border-width: 0 0 1px 0;
  704. }
  705. }
  706. &.border--none {
  707. .vxe-table--border-line {
  708. display: none;
  709. }
  710. .vxe-table--header-border-line {
  711. display: none;
  712. }
  713. }
  714. &.size--medium {
  715. font-size: $vxe-font-size-medium;
  716. .vxe-table--empty-placeholder,
  717. .vxe-table--empty-block {
  718. min-height: $vxe-table-row-height-medium;
  719. }
  720. .vxe-header--column,
  721. .vxe-body--column,
  722. .vxe-footer--column {
  723. &:not(.col--ellipsis) {
  724. padding: $vxe-table-column-padding-medium;
  725. }
  726. }
  727. .vxe-cell {
  728. .vxe-default-input,
  729. .vxe-default-textarea,
  730. .vxe-default-select {
  731. height: $vxe-input-height-medium;
  732. }
  733. .vxe-default-input {
  734. &[type="date"]::-webkit-inner-spin-button {
  735. margin-top: 3px;
  736. }
  737. }
  738. }
  739. }
  740. &.size--small {
  741. font-size: $vxe-font-size-small;
  742. .vxe-table--empty-placeholder,
  743. .vxe-table--empty-block {
  744. min-height: $vxe-table-row-height-small;
  745. }
  746. .vxe-header--column,
  747. .vxe-body--column,
  748. .vxe-footer--column {
  749. &:not(.col--ellipsis) {
  750. padding: $vxe-table-column-padding-small;
  751. }
  752. }
  753. .vxe-cell {
  754. .vxe-default-input,
  755. .vxe-default-textarea,
  756. .vxe-default-select {
  757. height: $vxe-input-height-small;
  758. }
  759. .vxe-default-input {
  760. &[type="date"]::-webkit-inner-spin-button {
  761. margin-top: 2px;
  762. }
  763. }
  764. }
  765. }
  766. &.size--mini {
  767. font-size: $vxe-font-size-mini;
  768. .vxe-table--empty-placeholder,
  769. .vxe-table--empty-block {
  770. min-height: $vxe-table-row-height-mini;
  771. }
  772. .vxe-header--column,
  773. .vxe-body--column,
  774. .vxe-footer--column {
  775. &:not(.col--ellipsis) {
  776. padding: $vxe-table-column-padding-mini;
  777. }
  778. }
  779. .vxe-cell {
  780. .vxe-default-input,
  781. .vxe-default-textarea,
  782. .vxe-default-select {
  783. height: $vxe-input-height-mini;
  784. }
  785. .vxe-default-input {
  786. &[type="date"]::-webkit-inner-spin-button {
  787. margin-top: 1px;
  788. }
  789. }
  790. }
  791. }
  792. .vxe-cell {
  793. white-space: pre-line;
  794. word-break: break-all;
  795. padding-left: $vxe-table-cell-padding-left;
  796. padding-right: $vxe-table-cell-padding-right;
  797. }
  798. // 单元格占位符
  799. .vxe-cell--placeholder {
  800. color: $vxe-table-cell-placeholder-color;
  801. }
  802. // 单选框和复选框
  803. .vxe-cell--radio {
  804. @extend %XERadioIcon;
  805. }
  806. .vxe-cell--checkbox {
  807. @extend %XECheckboxIcon;
  808. }
  809. .fixed--hidden {
  810. visibility: hidden;
  811. }
  812. .vxe-table--fixed-left-wrapper,
  813. .vxe-table--fixed-right-wrapper {
  814. width: 100%;
  815. position: absolute;
  816. top: 0;
  817. z-index: 5;
  818. overflow: hidden;
  819. background-color: inherit;
  820. transition: 0.3s box-shadow;
  821. .vxe-table--body-wrapper {
  822. overflow-x: hidden;
  823. }
  824. }
  825. .vxe-table--fixed-left-wrapper {
  826. .vxe-table--body-wrapper {
  827. width: calc(100% + 40px);
  828. }
  829. }
  830. &.is--header {
  831. .vxe-table--fixed-left-wrapper,
  832. .vxe-table--fixed-right-wrapper {
  833. .vxe-table--body-wrapper {
  834. &:before {
  835. display: none;
  836. }
  837. }
  838. }
  839. }
  840. .vxe-table--fixed-left-wrapper {
  841. left: 0;
  842. width: 200px;
  843. &.scrolling--middle {
  844. box-shadow: $vxe-table-fixed-left-scrolling-box-shadow;
  845. }
  846. }
  847. .vxe-table--fixed-right-wrapper {
  848. right: 0;
  849. &.scrolling--middle {
  850. box-shadow: $vxe-table-fixed-right-scrolling-box-shadow;
  851. }
  852. }
  853. .vxe-table--header-wrapper,
  854. .vxe-table--body-wrapper,
  855. .vxe-table--footer-wrapper {
  856. position: relative;
  857. &.fixed-left--wrapper,
  858. &.fixed-right--wrapper {
  859. position: absolute;
  860. top: 0;
  861. }
  862. &.fixed-left--wrapper {
  863. left: 0;
  864. }
  865. &.fixed-right--wrapper {
  866. right: 0;
  867. overflow-y: auto;
  868. }
  869. }
  870. .vxe-body--x-space {
  871. width: 100%;
  872. height: 1px;
  873. margin-bottom: -1px;
  874. }
  875. .vxe-body--y-space {
  876. width: 0;
  877. float: left;
  878. }
  879. /*列宽线*/
  880. .vxe-table--resizable-bar {
  881. display: none;
  882. position: absolute;
  883. top: 0;
  884. left: 0;
  885. width: 1px;
  886. height: 100%;
  887. z-index: 9;
  888. cursor: col-resize;
  889. &:before {
  890. content: "";
  891. display: block;
  892. height: 100%;
  893. background-color: $vxe-table-resizable-drag-line-color;
  894. }
  895. }
  896. /*边框线*/
  897. .vxe-table--border-line {
  898. position: absolute;
  899. top: 0;
  900. left: 0;
  901. width: 100%;
  902. height: 100%;
  903. z-index: 10;
  904. pointer-events: none;
  905. border: $vxe-table-border-width solid $vxe-table-border-color;
  906. }
  907. /*树形节点*/
  908. &.is--tree-line {
  909. .vxe-body--row {
  910. &:first-child {
  911. .vxe-tree--line {
  912. border-width: 0 0 1px 0;
  913. }
  914. }
  915. }
  916. .vxe-body--row {
  917. .vxe-body--column {
  918. background-image: none;
  919. }
  920. }
  921. }
  922. .vxe-tree--line-wrapper {
  923. position: relative;
  924. display: block;
  925. height: 0;
  926. }
  927. .vxe-tree--line {
  928. content: "";
  929. position: absolute;
  930. bottom: -0.9em;
  931. width: 0.8em;
  932. border-width: 0 0 1px 1px;
  933. border-style: $vxe-table-tree-node-line-style;
  934. border-color: $vxe-table-tree-node-line-color;
  935. pointer-events: none;
  936. }
  937. .vxe-cell--tree-node {
  938. position: relative;
  939. }
  940. .vxe-tree--btn-wrapper {
  941. position: absolute;
  942. top: 50%;
  943. width: 1em;
  944. height: 1em;
  945. text-align: center;
  946. transform: translateY(-50%);
  947. z-index: 1;
  948. user-select: none;
  949. cursor: pointer;
  950. }
  951. .vxe-tree--node-btn {
  952. display: block;
  953. color: lighten($vxe-table-font-color, 20%);
  954. &:hover {
  955. color: $vxe-table-font-color;
  956. }
  957. }
  958. .vxe-tree-cell {
  959. display: block;
  960. padding-left: 1.5em;
  961. }
  962. .vxe-body--column {
  963. &.col--ellipsis {
  964. & > .vxe-cell {
  965. .vxe-tree-cell {
  966. overflow: hidden;
  967. text-overflow: ellipsis;
  968. white-space: nowrap;
  969. }
  970. }
  971. }
  972. }
  973. /*展开行*/
  974. .vxe-table--expanded {
  975. cursor: pointer;
  976. .vxe-table--expand-btn {
  977. display: inline-block;
  978. width: 1em;
  979. height: 1em;
  980. text-align: center;
  981. user-select: none;
  982. color: lighten($vxe-table-font-color, 20%);
  983. &:hover {
  984. color: $vxe-table-font-color;
  985. }
  986. }
  987. &+.vxe-table--expand-label {
  988. padding-left: 0.5em;
  989. }
  990. }
  991. .vxe-body--expanded-column {
  992. border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
  993. &.col--ellipsis {
  994. & > .vxe-body--expanded-cell {
  995. overflow: hidden;
  996. text-overflow: ellipsis;
  997. white-space: nowrap;
  998. }
  999. }
  1000. }
  1001. .vxe-body--expanded-cell {
  1002. position: relative;
  1003. z-index: 1;
  1004. &.is--ellipsis {
  1005. overflow: auto;
  1006. }
  1007. }
  1008. /*设置列高度*/
  1009. &.vxe-editable {
  1010. .vxe-body--column {
  1011. @extend %DefaultColumnHeight;
  1012. }
  1013. &.size--medium {
  1014. .vxe-body--column {
  1015. @extend %MediumColumnHeight;
  1016. }
  1017. }
  1018. &.size--small {
  1019. .vxe-body--column {
  1020. @extend %SmallColumnHeight;
  1021. }
  1022. }
  1023. &.size--mini {
  1024. .vxe-body--column {
  1025. @extend %MiniColumnHeight;
  1026. }
  1027. }
  1028. }
  1029. /*溢出列*/
  1030. .vxe-header--column,
  1031. .vxe-body--column,
  1032. .vxe-footer--column {
  1033. &.col--ellipsis {
  1034. @extend %DefaultColumnHeight;
  1035. &:not(.col--actived) {
  1036. & > .vxe-cell {
  1037. @extend %TextEllipsis;
  1038. }
  1039. }
  1040. & > .vxe-cell {
  1041. max-height: $vxe-table-row-height-default;
  1042. }
  1043. }
  1044. }
  1045. &.size--medium {
  1046. .vxe-header--column,
  1047. .vxe-body--column,
  1048. .vxe-footer--column {
  1049. &.col--ellipsis {
  1050. @extend %MediumColumnHeight;
  1051. & > .vxe-cell {
  1052. max-height: $vxe-table-row-height-medium;
  1053. }
  1054. }
  1055. }
  1056. .vxe-cell--checkbox {
  1057. font-size: $vxe-checkbox-font-size-medium;
  1058. }
  1059. .vxe-cell--radio {
  1060. font-size: $vxe-radio-font-size-medium;
  1061. }
  1062. }
  1063. &.size--small {
  1064. .vxe-header--column,
  1065. .vxe-body--column,
  1066. .vxe-footer--column {
  1067. &.col--ellipsis {
  1068. @extend %SmallColumnHeight;
  1069. & > .vxe-cell {
  1070. max-height: $vxe-table-row-height-small;
  1071. }
  1072. }
  1073. }
  1074. .vxe-cell--checkbox {
  1075. font-size: $vxe-checkbox-font-size-small;
  1076. }
  1077. .vxe-cell--radio {
  1078. font-size: $vxe-radio-font-size-small;
  1079. }
  1080. }
  1081. &.size--mini {
  1082. .vxe-header--column,
  1083. .vxe-body--column,
  1084. .vxe-footer--column {
  1085. &.col--ellipsis {
  1086. @extend %MiniColumnHeight;
  1087. & > .vxe-cell {
  1088. max-height: $vxe-table-row-height-mini;
  1089. }
  1090. }
  1091. }
  1092. .vxe-cell--checkbox {
  1093. font-size: $vxe-checkbox-font-size-mini;
  1094. }
  1095. .vxe-cell--radio {
  1096. font-size: $vxe-radio-font-size-mini;
  1097. }
  1098. }
  1099. /*暂无数据*/
  1100. .vxe-table--empty-placeholder,
  1101. .vxe-table--empty-block {
  1102. min-height: $vxe-table-row-height-default;
  1103. justify-content: center;
  1104. align-items: center;
  1105. text-align: center;
  1106. overflow: hidden;
  1107. width: 100%;
  1108. pointer-events: none;
  1109. }
  1110. .vxe-table--empty-block {
  1111. display: none;
  1112. visibility: hidden;
  1113. }
  1114. .vxe-table--empty-placeholder {
  1115. display: none;
  1116. position: absolute;
  1117. top: 0;
  1118. z-index: 5;
  1119. }
  1120. .vxe-table--empty-content {
  1121. display: block;
  1122. width: 50%;
  1123. pointer-events: auto;
  1124. }
  1125. &.is--empty {
  1126. .vxe-table--empty-block,
  1127. .vxe-table--empty-placeholder {
  1128. display: flex;
  1129. }
  1130. }
  1131. .vxe-body--column {
  1132. &.col--selected {
  1133. box-shadow: inset 0px 0px 0px 2px $vxe-primary-color;
  1134. }
  1135. }
  1136. /*校验不通过*/
  1137. .vxe-body--column {
  1138. &.col--actived,
  1139. &.col--selected {
  1140. position: relative;
  1141. }
  1142. &.col--valid-error {
  1143. .vxe-cell--valid {
  1144. width: 320px;
  1145. position: absolute;
  1146. bottom: calc(100% + 4px);
  1147. left: 50%;
  1148. transform: translateX(-50%);
  1149. text-align: center;
  1150. pointer-events: none;
  1151. z-index: 4;
  1152. .vxe-cell--valid-msg {
  1153. display: inline-block;
  1154. border-radius: $vxe-border-radius;
  1155. padding: 8px 12px;
  1156. color: $vxe-table-validate-tooltip-error-color;
  1157. background-color: $vxe-table-validate-tooltip-error-background-color;
  1158. pointer-events: auto;
  1159. }
  1160. }
  1161. .vxe-default-input,
  1162. .vxe-default-textarea,
  1163. .vxe-default-select {
  1164. border-color: $vxe-table-validate-error-color;
  1165. }
  1166. .vxe-input {
  1167. > .vxe-input--inner {
  1168. border-color: $vxe-table-validate-error-color;
  1169. }
  1170. }
  1171. }
  1172. }
  1173. .vxe-body--row {
  1174. &:first-child {
  1175. .vxe-cell--valid {
  1176. bottom: auto;
  1177. top: calc(100% + 4px);
  1178. }
  1179. }
  1180. }
  1181. .vxe-body--column {
  1182. &:first-child {
  1183. .vxe-cell--valid {
  1184. left: 10px;
  1185. transform: translateX(0);
  1186. text-align: left;
  1187. }
  1188. }
  1189. }
  1190. /*单元格编辑状态*/
  1191. .vxe-body--row {
  1192. &.row--new {
  1193. & > .vxe-body--column {
  1194. position: relative;
  1195. &:before {
  1196. content: "";
  1197. top: -$vxe-table-cell-dirty-width;
  1198. left: -$vxe-table-cell-dirty-width;
  1199. position: absolute;
  1200. border-width: $vxe-table-cell-dirty-width;
  1201. border-style: solid;
  1202. border-color: transparent $vxe-table-cell-dirty-insert-color transparent transparent;
  1203. transform: rotate(45deg);
  1204. }
  1205. }
  1206. }
  1207. }
  1208. .vxe-body--column {
  1209. &.col--dirty {
  1210. position: relative;
  1211. &:before {
  1212. content: "";
  1213. top: -$vxe-table-cell-dirty-width;
  1214. left: -$vxe-table-cell-dirty-width;
  1215. position: absolute;
  1216. border-width: $vxe-table-cell-dirty-width;
  1217. border-style: solid;
  1218. border-color: transparent $vxe-table-cell-dirty-update-color transparent transparent;
  1219. transform: rotate(45deg);
  1220. }
  1221. }
  1222. }
  1223. /*可编辑*/
  1224. &.vxe-editable {
  1225. &.cell--highlight {
  1226. .vxe-body--column {
  1227. &.col--actived {
  1228. box-shadow: inset 0px 0px 0px 2px $vxe-primary-color;
  1229. &.col--valid-error {
  1230. box-shadow: inset 0px 0px 0px 2px $vxe-table-validate-error-color;
  1231. }
  1232. .vxe-cell {
  1233. .vxe-default-input,
  1234. .vxe-default-textarea {
  1235. border: 0;
  1236. padding: 0;
  1237. }
  1238. .vxe-default-input {
  1239. height: $vxe-table-row-line-height;
  1240. }
  1241. .vxe-input {
  1242. .vxe-input--inner {
  1243. border: 0;
  1244. padding-left: 0;
  1245. }
  1246. }
  1247. .vxe-textarea {
  1248. height: $vxe-table-row-line-height - 1;
  1249. .vxe-textarea--inner {
  1250. border: 0;
  1251. }
  1252. }
  1253. }
  1254. }
  1255. }
  1256. }
  1257. .vxe-body--column {
  1258. padding: 0;
  1259. &.col--actived {
  1260. padding: 0;
  1261. }
  1262. }
  1263. }
  1264. }
  1265. /*footer*/
  1266. .vxe-table--footer-wrapper {
  1267. color: $vxe-table-footer-font-color;
  1268. margin-top: -1px;
  1269. &.body--wrapper{
  1270. overflow-x: auto;
  1271. }
  1272. }
  1273. .vxe-footer--column {
  1274. &.col--ellipsis {
  1275. & > .vxe-cell {
  1276. display: flex;
  1277. align-items: center;
  1278. .vxe-cell--item {
  1279. overflow: hidden;
  1280. text-overflow: ellipsis;
  1281. white-space: nowrap;
  1282. }
  1283. }
  1284. }
  1285. }