table.scss 27 KB

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