table.scss 29 KB

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