table.scss 56 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440
  1. @use "sass:map";
  2. @use "sass:list";
  3. @use '../helpers/baseMixin.scss';
  4. @use './icon.scss';
  5. @use './table-module/all.scss';
  6. $btnThemeList: (
  7. (
  8. name: "primary",
  9. textColor: var(--vxe-ui-font-primary-color),
  10. ),
  11. (
  12. name: "success",
  13. textColor: var(--vxe-ui-status-success-color),
  14. ),
  15. (
  16. name: "info",
  17. textColor: var(--vxe-ui-status-info-color),
  18. ),
  19. (
  20. name: "warning",
  21. textColor: var(--vxe-ui-status-warning-color),
  22. ),
  23. (
  24. name: "danger",
  25. textColor: var(--vxe-ui-status-danger-color),
  26. ),
  27. (
  28. name: "error",
  29. textColor: var(--vxe-ui-status-error-color),
  30. )
  31. );
  32. .vxe-table-slots,
  33. .vxe-table--file-form {
  34. display: none;
  35. }
  36. .vxe-table-vars {
  37. height: 0;
  38. width: 0;
  39. visibility: hidden;
  40. overflow: hidden;
  41. user-select: none;
  42. pointer-events: none;
  43. .vxe-table-var-default {
  44. height: var(--vxe-ui-table-row-height-default);
  45. }
  46. .vxe-table-var-medium {
  47. height: var(--vxe-ui-table-row-height-medium);
  48. }
  49. .vxe-table-var-small {
  50. height: var(--vxe-ui-table-row-height-small);
  51. }
  52. .vxe-table-var-mini {
  53. height: var(--vxe-ui-table-row-height-mini);
  54. }
  55. }
  56. .vxe-table--print-frame {
  57. position: fixed;
  58. bottom: -100%;
  59. left: -100%;
  60. height: 0;
  61. width: 0;
  62. border: 0;
  63. }
  64. .vxe-table--layout-wrapper {
  65. display: flex;
  66. flex-direction: row;
  67. background-color: var(--vxe-ui-layout-background-color);
  68. }
  69. .vxe-table--viewport-wrapper {
  70. position: relative;
  71. overflow: hidden;
  72. flex-grow: 1;
  73. &.x-ob--contain {
  74. & > .vxe-table--main-wrapper {
  75. & > .vxe-table--header-wrapper {
  76. & > .vxe-table--header-inner-wrapper {
  77. overscroll-behavior-x: contain;
  78. }
  79. }
  80. & > .vxe-table--body-wrapper {
  81. & > .vxe-table--body-inner-wrapper {
  82. overscroll-behavior-x: contain;
  83. }
  84. }
  85. & > .vxe-table--footer-wrapper {
  86. & > .vxe-table--footer-inner-wrapper {
  87. overscroll-behavior-x: contain;
  88. }
  89. }
  90. }
  91. }
  92. &.y-ob--contain {
  93. & > .vxe-table--main-wrapper {
  94. & > .vxe-table--body-wrapper {
  95. & > .vxe-table--body-inner-wrapper {
  96. overscroll-behavior-y: contain;
  97. }
  98. }
  99. }
  100. }
  101. }
  102. .vxe-table--header-wrapper,
  103. .vxe-table--body-wrapper,
  104. .vxe-table--footer-wrapper,
  105. .vxe-table--fixed-left-body-wrapper,
  106. .vxe-table--fixed-right-body-wrapper {
  107. overflow: hidden;
  108. outline: 0;
  109. scrollbar-width: none;
  110. -webkit-overflow-scrolling: touch;
  111. }
  112. .vxe-table--header-inner-wrapper,
  113. .vxe-table--body-inner-wrapper,
  114. .vxe-table--footer-inner-wrapper {
  115. position: relative;
  116. width: 100%;
  117. height: 100%;
  118. scrollbar-width: none;
  119. -ms-overflow-style: none;
  120. -webkit-overflow-scrolling: touch;
  121. &::-webkit-scrollbar {
  122. display: none;
  123. }
  124. }
  125. .vxe-table--header-inner-wrapper,
  126. .vxe-table--footer-inner-wrapper {
  127. overflow-y: hidden;
  128. overflow-x: scroll;
  129. }
  130. .vxe-table--body-inner-wrapper {
  131. overflow-y: scroll;
  132. overflow-x: scroll;
  133. }
  134. // 禁用滚动条
  135. .vxe-table--main-wrapper {
  136. &.sx--hidden {
  137. & > .vxe-table--header-wrapper {
  138. & > .vxe-table--header-inner-wrapper {
  139. overflow-x: hidden;
  140. }
  141. }
  142. & > .vxe-table--body-wrapper {
  143. & > .vxe-table--body-inner-wrapper {
  144. overflow-x: hidden;
  145. }
  146. }
  147. & > .vxe-table--footer-wrapper {
  148. & > .vxe-table--footer-inner-wrapper {
  149. overflow-x: hidden;
  150. }
  151. }
  152. }
  153. &.sy--hidden {
  154. & > .vxe-table--body-wrapper {
  155. & > .vxe-table--body-inner-wrapper {
  156. overflow-y: hidden;
  157. }
  158. }
  159. }
  160. }
  161. .vxe-table--fixed-left-wrapper,
  162. .vxe-table--fixed-right-wrapper {
  163. &.sx--hidden {
  164. & > .vxe-table--body-wrapper {
  165. & > .vxe-table--body-inner-wrapper {
  166. overflow-x: hidden;
  167. }
  168. }
  169. }
  170. &.sy--hidden {
  171. & > .vxe-table--body-wrapper {
  172. & > .vxe-table--body-inner-wrapper {
  173. overflow-y: hidden;
  174. }
  175. }
  176. }
  177. }
  178. .vxe-loading--custom-wrapper {
  179. display: none;
  180. position: absolute;
  181. width: 100%;
  182. height: 100%;
  183. top: 0;
  184. left: 0;
  185. z-index: 99;
  186. user-select: none;
  187. &.is--visible {
  188. display: block;
  189. }
  190. }
  191. /*默认的渲染*/
  192. .vxe-header--column,
  193. .vxe-footer--column {
  194. &.fixed--width {
  195. & > .vxe-cell {
  196. & > .vxe-cell--wrapper {
  197. .vxe-default-input,
  198. .vxe-default-textarea,
  199. .vxe-default-select {
  200. width: 100%;
  201. }
  202. .vxe-input,
  203. .vxe-textarea,
  204. .vxe-select,
  205. .vxe-tree-select,
  206. .vxe-date-picker,
  207. .vxe-date-range-picker,
  208. .vxe-number-input,
  209. .vxe-ico-picker {
  210. width: 100%;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. .vxe-body--column {
  217. &.fixed--width {
  218. & > .vxe-cell {
  219. & > .vxe-cell--wrapper {
  220. & > .vxe-default-input,
  221. & > .vxe-default-textarea,
  222. & > .vxe-default-select {
  223. width: 100%;
  224. }
  225. & > .vxe-input,
  226. & > .vxe-textarea,
  227. & > .vxe-select,
  228. & > .vxe-tree-select,
  229. & > .vxe-date-picker,
  230. & > .vxe-date-range-picker,
  231. & > .vxe-number-input,
  232. & > .vxe-ico-picker {
  233. width: 100%;
  234. }
  235. & > .vxe-row-group--tree-node,
  236. & > .vxe-cell--tree-node {
  237. .vxe-default-input,
  238. .vxe-default-textarea,
  239. .vxe-default-select,
  240. .vxe-input,
  241. .vxe-textarea,
  242. .vxe-select,
  243. .vxe-tree-select,
  244. .vxe-date-picker,
  245. .vxe-date-range-picker,
  246. .vxe-number-input,
  247. .vxe-ico-picker {
  248. width: 100%;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. }
  255. .vxe-table--filter-template {
  256. & > .vxe-default-input,
  257. & > .vxe-default-textarea,
  258. & > .vxe-default-select {
  259. width: 100%;
  260. }
  261. & > .vxe-input,
  262. & > .vxe-textarea,
  263. & > .vxe-select,
  264. & > .vxe-tree-select,
  265. & > .vxe-date-picker,
  266. & > .vxe-date-range-picker,
  267. & > .vxe-number-input,
  268. & > .vxe-ico-picker {
  269. width: 100%;
  270. }
  271. }
  272. .vxe-cell,
  273. .vxe-table--filter-template {
  274. .vxe-default-input,
  275. .vxe-default-textarea {
  276. background-color: var(--vxe-ui-layout-background-color);
  277. }
  278. .vxe-default-input,
  279. .vxe-default-textarea,
  280. .vxe-default-select {
  281. font-family: var(--vxe-ui-font-family);
  282. outline: 0;
  283. color: var(--vxe-ui-font-color);
  284. border-radius: var(--vxe-ui-border-radius);
  285. border: 1px solid var(--vxe-ui-input-border-color);
  286. &:focus {
  287. border: 1px solid var(--vxe-ui-font-primary-color);
  288. }
  289. &[disabled] {
  290. cursor: not-allowed;
  291. background-color: var(--vxe-ui-input-disabled-background-color);
  292. }
  293. }
  294. .vxe-default-input,
  295. .vxe-default-textarea,
  296. .vxe-default-select {
  297. height: var(--vxe-ui-input-height-default);
  298. }
  299. .vxe-default-input {
  300. &[type="date"]::-webkit-inner-spin-button {
  301. margin-top: 4px;
  302. }
  303. &[type="date"]::-webkit-inner-spin-button,
  304. &[type="number"]::-webkit-inner-spin-button {
  305. height: 24px;
  306. }
  307. &::placeholder {
  308. color: var(--vxe-ui-input-placeholder-color);
  309. }
  310. }
  311. .vxe-default-textarea {
  312. font-size: 1em;
  313. resize: none;
  314. vertical-align: middle;
  315. }
  316. & > .vxe-input > .vxe-input--inner,
  317. & > .vxe-textarea > .vxe-textarea--inner {
  318. padding: 0 2px;
  319. }
  320. & > .vxe-textarea--inner,
  321. & > .vxe-default-textarea {
  322. resize: none;
  323. }
  324. & > .vxe-row-group--tree-node,
  325. & > .vxe-cell--tree-node {
  326. .vxe-input > .vxe-input--inner,
  327. .vxe-textarea > .vxe-textarea--inner {
  328. padding: 0 2px;
  329. }
  330. .vxe-textarea--inner,
  331. .vxe-default-textarea {
  332. resize: none;
  333. }
  334. }
  335. }
  336. .vxe-body--column {
  337. &.col--vertical-top {
  338. &.col--active {
  339. & > .vxe-cell {
  340. & > .vxe-cell--wrapper {
  341. height: 100%;
  342. & > .vxe-default-textarea {
  343. height: 100%;
  344. }
  345. }
  346. }
  347. }
  348. }
  349. }
  350. /*行高*/
  351. .vxe-table {
  352. &:not([data-calc-row]) {
  353. .vxe-body--column {
  354. &.col--vertical-top {
  355. &:not(.col--active) {
  356. & > .vxe-cell {
  357. & > .vxe-cell--wrapper {
  358. min-height: 100%;
  359. }
  360. }
  361. }
  362. }
  363. }
  364. }
  365. }
  366. /*负数显示红色*/
  367. .vxe-cell--label {
  368. &.is--negative {
  369. color: var(--vxe-ui-table-cell-negative-color);
  370. }
  371. }
  372. .vxe-table--checkbox-range,
  373. .vxe-table--cell-main-area,
  374. .vxe-table--cell-item-area,
  375. .vxe-table--cell-extend-area,
  376. .vxe-table--cell-active-area,
  377. .vxe-table--cell-copy-area,
  378. .vxe-table--cell-col-status-area,
  379. .vxe-table--cell-row-status-area {
  380. display: none;
  381. position: absolute;
  382. pointer-events: none;
  383. z-index: 1;
  384. }
  385. .vxe-table--header-wrapper {
  386. .vxe-table--cell-col-status-area {
  387. top: 0;
  388. height: 100%;
  389. }
  390. }
  391. .vxe-table--fixed-left-wrapper,
  392. .vxe-table--fixed-right-wrapper {
  393. .vxe-table--checkbox-range,
  394. .vxe-table--cell-main-area,
  395. .vxe-table--cell-item-area,
  396. .vxe-table--cell-extend-area,
  397. .vxe-table--cell-active-area,
  398. .vxe-table--cell-copy-area,
  399. .vxe-table--cell-col-status-area,
  400. .vxe-table--cell-row-status-area {
  401. z-index: 2;
  402. }
  403. }
  404. .vxe-table--fixed-left-wrapper {
  405. .vxe-table--cell-main-area,
  406. .vxe-table--cell-item-area,
  407. .vxe-table--cell-extend-area,
  408. .vxe-table--cell-active-area {
  409. &[half="1"] {
  410. border-right: 0;
  411. }
  412. }
  413. .vxe-table--cell-copy-area {
  414. &[half="1"] {
  415. background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, 0 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
  416. }
  417. }
  418. }
  419. .vxe-table--fixed-right-wrapper {
  420. .vxe-table--cell-main-area,
  421. .vxe-table--cell-item-area,
  422. .vxe-table--cell-extend-area,
  423. .vxe-table--cell-active-area {
  424. &[half="1"] {
  425. border-left: 0;
  426. }
  427. }
  428. .vxe-table--cell-copy-area {
  429. &[half="1"] {
  430. background-size: 0 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
  431. }
  432. }
  433. }
  434. /*复选框-范围选择*/
  435. .vxe-table--checkbox-range {
  436. background-color: var(--vxe-ui-table-checkbox-range-background-color);
  437. border: var(--vxe-ui-table-checkbox-range-border-width) solid var(--vxe-ui-table-checkbox-range-border-color);
  438. }
  439. .vxe-table--cell-area {
  440. height: 0;
  441. font-size: 0;
  442. display: none;
  443. & > .vxe-table--cell-main-area {
  444. background-color: var(--vxe-ui-table-cell-area-background-color);
  445. border: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
  446. }
  447. .vxe-table--cell-main-area-btn {
  448. display: none;
  449. position: absolute;
  450. right: -1px;
  451. bottom: -1px;
  452. width: 7px;
  453. height: 7px;
  454. border-style: solid;
  455. border-color: var(--vxe-ui-table-cell-main-area-extension-border-color);
  456. border-width: 1px 0 0 1px;
  457. background-color: var(--vxe-ui-table-cell-main-area-extension-background-color);
  458. pointer-events: auto;
  459. cursor: crosshair;
  460. }
  461. .vxe-table--cell-extend-area {
  462. border: var(--vxe-ui-table-cell-extend-area-border-width) solid var(--vxe-ui-table-cell-extend-area-border-color);
  463. }
  464. .vxe-table--cell-col-status-area,
  465. .vxe-table--cell-row-status-area {
  466. background-color: var(--vxe-ui-table-cell-area-status-background-color);
  467. }
  468. .vxe-table--cell-col-status-area {
  469. border-bottom: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
  470. }
  471. .vxe-table--cell-row-status-area {
  472. border-right: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
  473. }
  474. }
  475. @keyframes moveCopyCellBorder {
  476. from {
  477. }
  478. to {
  479. background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  480. }
  481. }
  482. .vxe-table--cell-copy-area {
  483. background: linear-gradient(0deg, transparent 6px, var(--vxe-ui-table-cell-clip-area-border-color) 6px) repeat-y,
  484. linear-gradient(0deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-y,
  485. linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x,
  486. linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x;
  487. background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
  488. background-position: 0 0, 100% 0, 0 0, 0 100%;
  489. animation: moveCopyCellBorder .5s infinite linear;
  490. }
  491. .vxe-table--cell-active-area {
  492. border-color: var(--vxe-ui-table-cell-active-area-border-color);
  493. border-style: solid;
  494. border-width: var(--vxe-ui-table-cell-active-area-border-width);
  495. background-color: var(--vxe-ui-table-cell-active-area-background-color);
  496. }
  497. .vxe-table--cell-multi-area {
  498. & > .vxe-table--cell-item-area {
  499. background-color: var(--vxe-ui-table-cell-area-background-color);
  500. }
  501. }
  502. /*圆角*/
  503. .vxe-table--render-default {
  504. &.is--round {
  505. %AllRadius {
  506. border-radius: var(--vxe-ui-table-border-radius);
  507. }
  508. %TopRadius {
  509. border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
  510. }
  511. %TopLeftRadius {
  512. border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
  513. }
  514. %TopRightRadius {
  515. border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
  516. }
  517. %BottomRadius {
  518. border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
  519. }
  520. %BottomLeftRadius {
  521. border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
  522. }
  523. %BottomRightRadius {
  524. border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
  525. }
  526. @extend %AllRadius;
  527. .vxe-table--border-line {
  528. @extend %AllRadius;
  529. }
  530. &.is--header {
  531. &:not(.is--footer) {
  532. .vxe-table--body-wrapper {
  533. &.fixed-left--wrapper {
  534. @extend %BottomLeftRadius;
  535. }
  536. &.body--wrapper {
  537. @extend %BottomRadius;
  538. }
  539. &.fixed-right--wrapper {
  540. @extend %BottomRightRadius;
  541. }
  542. }
  543. }
  544. .vxe-table--header-wrapper {
  545. &.fixed-left--wrapper {
  546. @extend %TopLeftRadius;
  547. }
  548. &.body--wrapper {
  549. @extend %TopRadius;
  550. }
  551. &.fixed-right--wrapper {
  552. @extend %TopRightRadius;
  553. }
  554. }
  555. }
  556. &:not(.is--header) {
  557. &:not(.is--footer) {
  558. .vxe-table--body-wrapper {
  559. &.body--wrapper {
  560. @extend %AllRadius;
  561. }
  562. }
  563. }
  564. }
  565. &.is--footer {
  566. &:not(.is--header) {
  567. .vxe-table--body-wrapper {
  568. &.fixed-left--wrapper {
  569. @extend %BottomLeftRadius;
  570. }
  571. &.body--wrapper {
  572. @extend %TopRadius;
  573. }
  574. &.fixed-right--wrapper {
  575. @extend %BottomRightRadius;
  576. }
  577. }
  578. }
  579. .vxe-table--footer-wrapper {
  580. &.fixed-left--wrapper {
  581. @extend %BottomLeftRadius;
  582. }
  583. &.body--wrapper {
  584. @extend %BottomRadius;
  585. }
  586. &.fixed-right--wrapper {
  587. @extend %BottomRightRadius;
  588. }
  589. }
  590. }
  591. &.sx-pos--top {
  592. .vxe-table--scroll-x-left-corner {
  593. &::before {
  594. @extend %TopLeftRadius;
  595. }
  596. }
  597. .vxe-table--scroll-x-right-corner {
  598. &::before {
  599. @extend %TopRightRadius;
  600. }
  601. }
  602. }
  603. &.sx-pos--bottom {
  604. &.sy-pos--right {
  605. .vxe-table--scroll-y-top-corner {
  606. @extend %TopRightRadius;
  607. &::before {
  608. @extend %TopRightRadius;
  609. }
  610. }
  611. }
  612. &.sy-pos--left {
  613. .vxe-table--scroll-y-top-corner {
  614. @extend %TopLeftRadius;
  615. &::before {
  616. @extend %TopLeftRadius;
  617. }
  618. }
  619. }
  620. .vxe-table--scroll-x-left-corner {
  621. &::before {
  622. @extend %BottomLeftRadius;
  623. }
  624. }
  625. .vxe-table--scroll-x-right-corner {
  626. &::before {
  627. @extend %BottomRightRadius;
  628. }
  629. }
  630. }
  631. }
  632. }
  633. /*列宽*/
  634. .vxe-table {
  635. &[data-calc-col] {
  636. .vxe-header--column,
  637. .vxe-body--column,
  638. .vxe-footer--column {
  639. .vxe-cell {
  640. & > .vxe-cell--wrapper {
  641. word-break: break-all;
  642. white-space: nowrap;
  643. }
  644. }
  645. }
  646. }
  647. &:not([data-calc-col]) {
  648. .vxe-cell--wrapper {
  649. min-width: 100%;
  650. }
  651. }
  652. }
  653. /*scroll*/
  654. .vxe-table {
  655. &.is--loading {
  656. & > .vxe-table--scroll-x-virtual {
  657. visibility: hidden;
  658. }
  659. & > .vxe-table--layout-wrapper {
  660. & > .vxe-table--scroll-y-virtual {
  661. visibility: hidden;
  662. }
  663. }
  664. }
  665. .vxe-table--scroll-x-virtual {
  666. height: 0;
  667. }
  668. .vxe-table--scroll-y-virtual {
  669. width: 0;
  670. }
  671. .vxe-table--scroll-x-virtual,
  672. .vxe-table--scroll-y-virtual {
  673. visibility: hidden;
  674. position: relative;
  675. flex-shrink: 0;
  676. z-index: 7;
  677. }
  678. .vxe-table--scroll-x-handle,
  679. .vxe-table--scroll-y-handle,
  680. .vxe-table--scroll-x-wrapper,
  681. .vxe-table--scroll-y-wrapper,
  682. .vxe-table--scroll-y-top-corner,
  683. .vxe-table--scroll-y-bottom-corner,
  684. .vxe-table--scroll-x-left-corner,
  685. .vxe-table--scroll-x-right-corner {
  686. position: absolute;
  687. }
  688. .vxe-table--scroll-x-handle,
  689. .vxe-table--scroll-x-wrapper {
  690. width: 100%;
  691. left: 0;
  692. bottom: 0;
  693. }
  694. .vxe-table--scroll-x-wrapper {
  695. height: 100%;
  696. }
  697. .vxe-table--scroll-x-handle {
  698. overflow-y: hidden;
  699. overflow-x: scroll;
  700. height: 18px;
  701. }
  702. .vxe-table--scroll-y-handle,
  703. .vxe-table--scroll-y-wrapper {
  704. width: 100%;
  705. height: 100%;
  706. right: 0;
  707. top: 0;
  708. }
  709. .vxe-table--scroll-y-handle {
  710. overflow-y: scroll;
  711. overflow-x: hidden;
  712. width: 18px;
  713. height: 100%;
  714. }
  715. .vxe-table--scroll-x-space {
  716. height: 1px;
  717. }
  718. .vxe-table--scroll-y-space {
  719. width: 1px;
  720. }
  721. .vxe-table--scroll-x-left-corner,
  722. .vxe-table--scroll-x-right-corner,
  723. .vxe-table--scroll-y-top-corner,
  724. .vxe-table--scroll-y-bottom-corner {
  725. display: none;
  726. position: absolute;
  727. }
  728. .vxe-table--scroll-x-left-corner,
  729. .vxe-table--scroll-x-right-corner {
  730. bottom: 0;
  731. width: 0;
  732. height: 100%;
  733. &::before {
  734. content: "";
  735. position: absolute;
  736. top: 0;
  737. left: 0;
  738. width: 100%;
  739. height: 100%;
  740. z-index: 1;
  741. border-width: var(--vxe-ui-table-border-width);
  742. border-style: solid;
  743. border-color: var(--vxe-ui-table-border-color);
  744. }
  745. }
  746. .vxe-table--scroll-x-left-corner {
  747. left: 0;
  748. }
  749. .vxe-table--scroll-x-right-corner {
  750. right: 0;
  751. }
  752. &.sy-pos--right {
  753. .vxe-table--scroll-x-right-corner {
  754. right: 1px;
  755. &::before {
  756. border-right: 0;
  757. }
  758. }
  759. }
  760. &.sx-pos--bottom {
  761. .vxe-table--scroll-x-right-corner {
  762. bottom: 1px;
  763. &::before {
  764. border-bottom: 0;
  765. }
  766. }
  767. }
  768. .vxe-table--scroll-y-top-corner {
  769. background-color: var(--vxe-ui-table-header-background-color);
  770. }
  771. .vxe-table--scroll-y-top-corner,
  772. .vxe-table--scroll-y-bottom-corner {
  773. top: 0;
  774. right: 0;
  775. width: 100%;
  776. height: 0;
  777. }
  778. .vxe-table--scroll-y-bottom-corner {
  779. margin-top: -1px;
  780. }
  781. }
  782. /*header*/
  783. .vxe-table {
  784. .vxe-table--header-wrapper {
  785. color: var(--vxe-ui-table-header-font-color);
  786. }
  787. /*排序*/
  788. .vxe-cell--sort {
  789. text-align: center;
  790. position: relative;
  791. padding: 0 0.1em 0 0.2em;
  792. }
  793. .vxe-cell--sort-vertical-layout {
  794. display: inline-flex;
  795. flex-direction: column;
  796. height: 1.8em;
  797. vertical-align: middle;
  798. .vxe-sort--asc-btn,
  799. .vxe-sort--desc-btn {
  800. height: 0.6em;
  801. }
  802. }
  803. .vxe-cell--sort-horizontal-layout {
  804. display: inline-flex;
  805. flex-direction: row;
  806. .vxe-sort--asc-btn,
  807. .vxe-sort--desc-btn {
  808. width: 0.5em;
  809. }
  810. }
  811. .vxe-sort--asc-btn,
  812. .vxe-sort--desc-btn {
  813. color: var(--vxe-ui-table-column-icon-border-color);
  814. cursor: pointer;
  815. &:hover {
  816. color: var(--vxe-ui-font-color);
  817. }
  818. &.sort--active {
  819. color: var(--vxe-ui-font-primary-color);
  820. }
  821. }
  822. }
  823. .vxe-sort--asc-btn,
  824. .vxe-sort--desc-btn,
  825. .vxe-filter--btn {
  826. &:before,
  827. &:after {
  828. @include baseMixin.createAnimationTransition(border);
  829. }
  830. }
  831. .vxe-header--column {
  832. position: relative;
  833. font-weight: var(--vxe-ui-table-header-font-weight);
  834. // user-select: none;
  835. &.col--ellipsis {
  836. & > .vxe-cell {
  837. .vxe-cell--wrapper {
  838. display: flex;
  839. align-items: center;
  840. .vxe-cell--drag-handle,
  841. .vxe-cell--sort,
  842. .vxe-cell--filter,
  843. .vxe-cell-title-prefix-icon,
  844. .vxe-cell-title-suffix-icon,
  845. .vxe-cell--checkbox,
  846. .vxe-cell-title-suffix-icon,
  847. .vxe-cell--required-icon {
  848. flex-shrink: 0;
  849. }
  850. }
  851. .vxe-cell--title {
  852. overflow: hidden;
  853. text-overflow: ellipsis;
  854. white-space: nowrap;
  855. }
  856. }
  857. }
  858. .vxe-cell--required-icon {
  859. display: inline-block;
  860. color: var(--vxe-ui-table-validate-error-color);
  861. width: 0.8em;
  862. height: 1em;
  863. line-height: 1em;
  864. position: relative;
  865. & > i {
  866. font-family: Verdana,Arial,Tahoma;
  867. font-weight: normal;
  868. &:before {
  869. content: "*";
  870. position: absolute;
  871. left: 0;
  872. top: 0.2em;
  873. }
  874. }
  875. }
  876. // .vxe-cell--required-icon,
  877. // .vxe-cell--edit-icon,
  878. // .vxe-cell-title-prefix-icon,
  879. // .vxe-cell-title-suffix-icon,
  880. // .vxe-cell--title {
  881. // vertical-align: middle;
  882. // }
  883. .vxe-cell--required-icon {
  884. padding-right: 0.1em;
  885. }
  886. .vxe-cell--edit-icon,
  887. .vxe-cell-title-prefix-icon,
  888. .vxe-cell-title-suffix-icon {
  889. padding: 0.2em;
  890. }
  891. .vxe-cell-title-prefix-icon,
  892. .vxe-cell-title-suffix-icon {
  893. @for $index from 0 to list.length($btnThemeList) {
  894. $item: list.nth($btnThemeList, $index + 1);
  895. &.theme--#{map.get($item, name)} {
  896. color: map.get($item, textColor);
  897. }
  898. }
  899. }
  900. }
  901. .vxe-cell--col-resizable {
  902. position: absolute;
  903. right: -0.3em;
  904. bottom: 0;
  905. width: 0.6em;
  906. height: 100%;
  907. text-align: center;
  908. z-index: 1;
  909. cursor: col-resize;
  910. &.is--line {
  911. &:before,
  912. &:after {
  913. content: "";
  914. display: inline-block;
  915. vertical-align: middle;
  916. }
  917. &:before {
  918. width: 1px;
  919. height: 50%;
  920. background-color: var(--vxe-ui-table-resizable-line-color);
  921. }
  922. &:after {
  923. width: 0;
  924. height: 100%;
  925. }
  926. }
  927. }
  928. .vxe-header--column {
  929. &:last-child {
  930. & > .vxe-cell--col-resizable {
  931. right: 0;
  932. }
  933. }
  934. }
  935. .vxe-table--fixed-right-wrapper {
  936. .vxe-cell--col-resizable {
  937. right: auto;
  938. left: -0.3em;
  939. }
  940. }
  941. .vxe-body--column {
  942. .vxe-cell--row-resizable {
  943. position: absolute;
  944. left: 0;
  945. bottom: -0.4em;
  946. height: 0.8em;
  947. width: 100%;
  948. text-align: center;
  949. z-index: 1;
  950. cursor: row-resize;
  951. }
  952. }
  953. .vxe-body--row {
  954. &:last-child {
  955. .vxe-body--column {
  956. .vxe-cell--row-resizable {
  957. height: 0.4em;
  958. bottom: -0px;
  959. }
  960. }
  961. }
  962. }
  963. /*拖拽线*/
  964. .vxe-table--resizable-row-bar,
  965. .vxe-table--resizable-col-bar {
  966. display: none;
  967. position: absolute;
  968. top: 0;
  969. left: 0;
  970. z-index: 13;
  971. pointer-events: none;
  972. user-select: none;
  973. &:before {
  974. content: "";
  975. display: block;
  976. background-color: var(--vxe-ui-table-resizable-drag-line-color);
  977. }
  978. .vxe-table--resizable-number-tip {
  979. position: absolute;
  980. padding: 0.25em 0.25em;
  981. font-size: 12px;
  982. border-radius: var(--vxe-ui-border-radius);
  983. white-space: nowrap;
  984. color: #ffffff;
  985. background-color: var(--vxe-ui-table-resizable-drag-line-color);
  986. user-select: none;
  987. pointer-events: none;
  988. }
  989. }
  990. /*列宽线*/
  991. .vxe-table--resizable-col-bar {
  992. width: 1px;
  993. height: 100%;
  994. cursor: col-resize;
  995. &:before {
  996. width: 1px;
  997. height: 100%;
  998. }
  999. .vxe-table--resizable-number-tip {
  1000. left: 0;
  1001. top: 1em;
  1002. }
  1003. }
  1004. // 行高线
  1005. .vxe-table--resizable-row-bar {
  1006. height: 1px;
  1007. width: 100%;
  1008. cursor: row-resize;
  1009. &:before {
  1010. height: 1px;
  1011. width: 100%;
  1012. }
  1013. .vxe-table--resizable-number-tip {
  1014. top: 0;
  1015. left: 0;
  1016. }
  1017. }
  1018. /*拖拽行与列*/
  1019. .vxe-table--drag-col-line,
  1020. .vxe-table--drag-row-line {
  1021. display: none;
  1022. position: absolute;
  1023. top: 0;
  1024. left: 0;
  1025. z-index: 11;
  1026. pointer-events: none;
  1027. }
  1028. .vxe-table--drag-row-line {
  1029. width: 100%;
  1030. height: 1px;
  1031. border: 2px solid transparent;
  1032. &[drag-pos="top"] {
  1033. border-top-color: var(--vxe-ui-font-primary-color);
  1034. }
  1035. &[drag-pos="bottom"] {
  1036. border-bottom-color: var(--vxe-ui-font-primary-color);
  1037. }
  1038. &[drag-to-child="y"] {
  1039. border-top-color: transparent;
  1040. border-bottom-color: transparent;
  1041. border-left-color: var(--vxe-ui-status-success-color);
  1042. }
  1043. &.is--guides {
  1044. background-color: var( --vxe-ui-table-drag-over-background-color);
  1045. }
  1046. }
  1047. .vxe-table--drag-col-line {
  1048. height: 100%;
  1049. width: 1px;
  1050. border: 2px solid transparent;
  1051. &[drag-pos="left"] {
  1052. border-left-color: var(--vxe-ui-font-primary-color);
  1053. }
  1054. &[drag-pos="right"] {
  1055. border-right-color: var(--vxe-ui-font-primary-color);
  1056. }
  1057. &[drag-to-child="y"] {
  1058. border-left-color: transparent;
  1059. border-right-color: transparent;
  1060. border-bottom-color: var(--vxe-ui-status-success-color);
  1061. }
  1062. &.is--guides {
  1063. background-color: var( --vxe-ui-table-drag-over-background-color);
  1064. }
  1065. }
  1066. .vxe-body--row-list-move {
  1067. transition-property: transform;
  1068. transition-duration: 0.35s;
  1069. }
  1070. .vxe-table--drag-sort-tip {
  1071. display: none;
  1072. position: absolute;
  1073. top: 0;
  1074. left: 0;
  1075. padding: 0.6em 1.4em;
  1076. max-width: 50%;
  1077. min-width: 100px;
  1078. border-radius: var(--vxe-ui-border-radius);
  1079. overflow: hidden;
  1080. text-overflow: ellipsis;
  1081. white-space: nowrap;
  1082. user-select: none;
  1083. pointer-events: none;
  1084. background-color: var(--vxe-ui-layout-background-color);
  1085. box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  1086. z-index: 33;
  1087. &[drag-status="normal"] {
  1088. .vxe-table--drag-sort-tip-normal-status {
  1089. display: block;
  1090. }
  1091. }
  1092. &[drag-status="sub"] {
  1093. .vxe-table--drag-sort-tip-sub-status {
  1094. display: block;
  1095. }
  1096. }
  1097. &[drag-status="disabled"] {
  1098. .vxe-table--drag-sort-tip-disabled-status {
  1099. display: block;
  1100. }
  1101. }
  1102. }
  1103. .vxe-table--drag-sort-tip-wrapper {
  1104. display: flex;
  1105. flex-direction: row;
  1106. align-items: center;
  1107. }
  1108. .vxe-table--drag-sort-tip-status {
  1109. padding-right: 0.4em;
  1110. }
  1111. .vxe-table--drag-sort-tip-disabled-status {
  1112. display: none;
  1113. flex-shrink: 0;
  1114. color: var(--vxe-ui-status-error-color)
  1115. }
  1116. .vxe-table--drag-sort-tip-normal-status,
  1117. .vxe-table--drag-sort-tip-sub-status {
  1118. display: none;
  1119. }
  1120. .vxe-table--drag-sort-tip-content {
  1121. flex-grow: 1;
  1122. overflow: hidden;
  1123. text-overflow: ellipsis;
  1124. white-space: nowrap;
  1125. }
  1126. /*table*/
  1127. .vxe-table--render-default {
  1128. position: relative;
  1129. font-size: var(--vxe-ui-font-size-default);
  1130. color: var(--vxe-ui-font-color);
  1131. font-family: var(--vxe-ui-font-family);
  1132. direction: ltr;
  1133. .vxe-table--body-wrapper {
  1134. background-color: var(--vxe-ui-layout-background-color);
  1135. }
  1136. .vxe-table--footer-wrapper {
  1137. margin-top: calc(var(--vxe-ui-table-border-width) * -1);
  1138. background-color: var(--vxe-ui-table-footer-background-color);
  1139. }
  1140. .vxe-table--header,
  1141. .vxe-table--body,
  1142. .vxe-table--footer {
  1143. border: 0;
  1144. border-spacing: 0;
  1145. border-collapse: separate;
  1146. table-layout: fixed;
  1147. }
  1148. &:not(.is--empty) {
  1149. &.is--footer {
  1150. &.is--scroll-x {
  1151. .vxe-table--body-wrapper {
  1152. outline: 0;
  1153. }
  1154. }
  1155. }
  1156. }
  1157. &.col-drag--resize {
  1158. .vxe-table--main-wrapper,
  1159. .vxe-table--fixed-left-wrapper,
  1160. .vxe-table--fixed-right-wrapper {
  1161. * {
  1162. cursor: col-resize;
  1163. }
  1164. }
  1165. }
  1166. &.row-drag--resize {
  1167. .vxe-table--main-wrapper,
  1168. .vxe-table--fixed-left-wrapper,
  1169. .vxe-table--fixed-right-wrapper {
  1170. * {
  1171. cursor: row-resize;
  1172. }
  1173. }
  1174. }
  1175. &.drag--range,
  1176. &.drag--area {
  1177. .vxe-table--main-wrapper,
  1178. .vxe-table--fixed-left-wrapper,
  1179. .vxe-table--fixed-right-wrapper {
  1180. * {
  1181. cursor: default;
  1182. }
  1183. }
  1184. }
  1185. &.drag--extend-range {
  1186. .vxe-table--main-wrapper,
  1187. .vxe-table--fixed-left-wrapper,
  1188. .vxe-table--fixed-right-wrapper {
  1189. * {
  1190. cursor: crosshair;
  1191. }
  1192. }
  1193. }
  1194. &.col--drag-cell {
  1195. .vxe-header--column {
  1196. user-select: none;
  1197. &.is--drag-active {
  1198. cursor: grab;
  1199. &:active {
  1200. cursor: grabbing;
  1201. }
  1202. &:hover {
  1203. color: var(--vxe-ui-font-primary-color);
  1204. }
  1205. }
  1206. &.is--drag-disabled {
  1207. color: var(--vxe-ui-input-disabled-color);
  1208. cursor: not-allowed;
  1209. }
  1210. }
  1211. }
  1212. &.header-cell--area {
  1213. .vxe-table--header-wrapper {
  1214. user-select: none;
  1215. }
  1216. }
  1217. &.body-cell--area {
  1218. .vxe-table--body-wrapper {
  1219. user-select: none;
  1220. }
  1221. }
  1222. &.drag--range {
  1223. .vxe-body--column {
  1224. user-select: none;
  1225. }
  1226. }
  1227. &.checkbox--range {
  1228. .vxe-body--column {
  1229. &.col--checkbox {
  1230. user-select: none;
  1231. }
  1232. }
  1233. }
  1234. .vxe-header--column,
  1235. .vxe-body--column,
  1236. .vxe-footer--column {
  1237. position: relative;
  1238. line-height: var(--vxe-ui-table-row-line-height);
  1239. text-align: left;
  1240. &.col--center {
  1241. text-align: center;
  1242. & > .vxe-cell {
  1243. justify-content: center;
  1244. }
  1245. }
  1246. &.col--right {
  1247. text-align: right;
  1248. & > .vxe-cell {
  1249. justify-content: right;
  1250. }
  1251. }
  1252. }
  1253. .vxe-header--column {
  1254. &.col--ellipsis {
  1255. &.col--center {
  1256. .vxe-cell--wrapper {
  1257. justify-content: center;
  1258. }
  1259. }
  1260. &.col--right {
  1261. .vxe-cell--wrapper {
  1262. justify-content: right;
  1263. }
  1264. }
  1265. }
  1266. }
  1267. .vxe-header--column,
  1268. .vxe-footer--column {
  1269. &.col--ellipsis {
  1270. &.col--center {
  1271. .vxe-cell{
  1272. justify-content: center;
  1273. }
  1274. }
  1275. &.col--right {
  1276. .vxe-cell{
  1277. justify-content: flex-end;
  1278. }
  1279. }
  1280. }
  1281. }
  1282. // 行高亮
  1283. .vxe-body--row {
  1284. &.row--stripe {
  1285. & > .vxe-body--column {
  1286. background-color: var(--vxe-ui-table-row-striped-background-color);
  1287. }
  1288. }
  1289. }
  1290. // 列高亮
  1291. &.column--highlight {
  1292. .vxe-header--column {
  1293. &:hover {
  1294. background-color: var(--vxe-ui-table-column-hover-background-color);
  1295. &.col--current {
  1296. background-color: var(--vxe-ui-table-column-hover-current-background-color);
  1297. }
  1298. }
  1299. }
  1300. }
  1301. .vxe-header--column,
  1302. .vxe-body--column,
  1303. .vxe-footer--column {
  1304. position: relative;
  1305. line-height: var(--vxe-ui-table-row-line-height);
  1306. text-align: left;
  1307. &.col--current {
  1308. background-color: var(--vxe-ui-table-column-current-background-color);
  1309. // .vxe-cell--tree-btn {
  1310. // background-color: var(--vxe-ui-table-column-current-background-color);
  1311. // }
  1312. }
  1313. }
  1314. // &.is--tree-line {
  1315. // .vxe-header--column,
  1316. // .vxe-body--column,
  1317. // .vxe-footer--column {
  1318. // &.col--current {
  1319. // .vxe-cell--tree-btn {
  1320. // background-color: var(--vxe-ui-table-column-current-background-color);
  1321. // }
  1322. // }
  1323. // }
  1324. // }
  1325. // 行高亮
  1326. .vxe-body--row {
  1327. &.row--radio {
  1328. & > .vxe-body--column {
  1329. background-color: var(--vxe-ui-table-row-radio-checked-background-color);
  1330. }
  1331. }
  1332. &.row--checked {
  1333. & > .vxe-body--column {
  1334. background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
  1335. }
  1336. }
  1337. &.row--current {
  1338. & > .vxe-body--column {
  1339. background-color: var(--vxe-ui-table-row-current-background-color);
  1340. }
  1341. }
  1342. &.row--hover {
  1343. & > .vxe-body--column {
  1344. background-color: var(--vxe-ui-table-row-hover-background-color);
  1345. &.col--current {
  1346. background-color: var(--vxe-ui-table-column-current-background-color);
  1347. }
  1348. }
  1349. &.row--stripe {
  1350. & > .vxe-body--column {
  1351. background-color: var(--vxe-ui-table-row-hover-striped-background-color);
  1352. }
  1353. }
  1354. &.row--radio {
  1355. & > .vxe-body--column {
  1356. background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
  1357. }
  1358. }
  1359. &.row--checked {
  1360. & > .vxe-body--column {
  1361. background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
  1362. }
  1363. }
  1364. &.row--current {
  1365. & > .vxe-body--column {
  1366. background-color: var(--vxe-ui-table-row-hover-current-background-color);
  1367. }
  1368. }
  1369. }
  1370. }
  1371. // &.is--tree-line {
  1372. // .vxe-body--row {
  1373. // &.row--stripe {
  1374. // .vxe-cell--tree-btn {
  1375. // background-color: var(--vxe-ui-table-row-striped-background-color);
  1376. // }
  1377. // }
  1378. // &.row--radio {
  1379. // .vxe-cell--tree-btn {
  1380. // background-color: var(--vxe-ui-table-row-radio-checked-background-color);
  1381. // }
  1382. // }
  1383. // &.row--checked {
  1384. // .vxe-cell--tree-btn {
  1385. // background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
  1386. // }
  1387. // }
  1388. // &.row--current {
  1389. // .vxe-cell--tree-btn {
  1390. // background-color: var(--vxe-ui-table-row-current-background-color);
  1391. // }
  1392. // }
  1393. // &.row--hover {
  1394. // .vxe-cell--tree-btn {
  1395. // background-color: var(--vxe-ui-table-row-hover-background-color);
  1396. // }
  1397. // &.row--stripe {
  1398. // .vxe-cell--tree-btn {
  1399. // background-color: var(--vxe-ui-table-row-hover-striped-background-color);
  1400. // }
  1401. // }
  1402. // &.row--radio {
  1403. // .vxe-cell--tree-btn {
  1404. // background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
  1405. // }
  1406. // }
  1407. // &.row--checked {
  1408. // .vxe-cell--tree-btn {
  1409. // background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
  1410. // }
  1411. // }
  1412. // &.row--current {
  1413. // .vxe-cell--tree-btn {
  1414. // background-color: var(--vxe-ui-table-row-hover-current-background-color);
  1415. // }
  1416. // }
  1417. // }
  1418. // }
  1419. // }
  1420. /*边框*/
  1421. &.border--default,
  1422. &.border--full,
  1423. &.border--outer,
  1424. &.border--inner {
  1425. .vxe-table--scroll-y-top-corner,
  1426. .vxe-table--scroll-y-bottom-corner {
  1427. &::before {
  1428. content: "";
  1429. position: absolute;
  1430. top: 0;
  1431. left: 0;
  1432. width: 100%;
  1433. height: 100%;
  1434. z-index: 1;
  1435. border-width: 0;
  1436. border-style: solid;
  1437. border-color: var(--vxe-ui-table-border-color);
  1438. }
  1439. }
  1440. .vxe-table--scroll-y-top-corner {
  1441. &::before {
  1442. border-bottom-width: var(--vxe-ui-table-border-width);
  1443. }
  1444. }
  1445. .vxe-table--scroll-y-bottom-corner {
  1446. border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1447. }
  1448. .vxe-table--scroll-x-handle-appearance {
  1449. position: absolute;
  1450. left: 0;
  1451. width: 100%;
  1452. height: 100%;
  1453. z-index: 1;
  1454. pointer-events: none;
  1455. }
  1456. &.sx-pos--top {
  1457. .vxe-table--scroll-x-handle-appearance {
  1458. top: 0;
  1459. border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1460. }
  1461. }
  1462. &.sx-pos--bottom {
  1463. .vxe-table--scroll-x-handle-appearance {
  1464. bottom: 0;
  1465. height: calc(100% + var(--vxe-ui-table-border-width));
  1466. border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1467. }
  1468. }
  1469. }
  1470. &.border--default,
  1471. &.border--none,
  1472. &.border--outer,
  1473. &.border--inner {
  1474. .vxe-cell--col-resizable {
  1475. &:before,
  1476. &:after {
  1477. content: "";
  1478. display: inline-block;
  1479. vertical-align: middle;
  1480. }
  1481. &:before {
  1482. width: 1px;
  1483. height: 50%;
  1484. background-color: var(--vxe-ui-table-resizable-line-color);
  1485. }
  1486. &:after {
  1487. width: 0;
  1488. height: 100%;
  1489. }
  1490. }
  1491. }
  1492. &.border--default,
  1493. &.border--full,
  1494. &.border--outer {
  1495. .vxe-table--header-wrapper {
  1496. background-color: var(--vxe-ui-table-header-background-color);
  1497. }
  1498. }
  1499. &.border--default,
  1500. &.border--inner {
  1501. .vxe-header--column,
  1502. .vxe-body--column,
  1503. .vxe-footer--column {
  1504. background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
  1505. background-repeat: no-repeat;
  1506. background-size: 100% var(--vxe-ui-table-border-width);
  1507. background-position: right bottom;
  1508. }
  1509. }
  1510. &.border--default,
  1511. &.border--full,
  1512. &.border--inner {
  1513. .vxe-table--footer-wrapper {
  1514. border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1515. }
  1516. }
  1517. &.border--default,
  1518. &.border--full {
  1519. .vxe-table--scroll-y-top-corner {
  1520. &::before {
  1521. border-left-width: var(--vxe-ui-table-border-width);
  1522. border-right-width: var(--vxe-ui-table-border-width);
  1523. }
  1524. }
  1525. .vxe-table--scroll-y-bottom-corner {
  1526. &::before {
  1527. border-left-width: var(--vxe-ui-table-border-width);
  1528. border-right-width: var(--vxe-ui-table-border-width);
  1529. }
  1530. }
  1531. &.sy-pos--right {
  1532. .vxe-table--scroll-y-top-corner,
  1533. .vxe-table--scroll-y-bottom-corner {
  1534. &::before {
  1535. width: calc(100% + 1px);
  1536. left: -1px;
  1537. }
  1538. }
  1539. }
  1540. .vxe-table--scroll-y-handle-appearance {
  1541. position: absolute;
  1542. top: 0;
  1543. width: 100%;
  1544. height: 100%;
  1545. z-index: 1;
  1546. pointer-events: none;
  1547. }
  1548. &.sy-pos--left {
  1549. .vxe-table--scroll-y-handle-appearance {
  1550. left: 0;
  1551. border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1552. }
  1553. }
  1554. &.sy-pos--right {
  1555. .vxe-table--scroll-y-handle-appearance {
  1556. right: 0;
  1557. width: calc(100% + var(--vxe-ui-table-border-width));
  1558. border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1559. }
  1560. }
  1561. }
  1562. &.border--full {
  1563. .vxe-header--column,
  1564. .vxe-body--column,
  1565. .vxe-footer--column {
  1566. background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
  1567. background-repeat: no-repeat;
  1568. background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
  1569. background-position: right top, right bottom;
  1570. }
  1571. .vxe-table--fixed-left-wrapper {
  1572. // border-right: 1px solid var(--vxe-ui-table-border-color);
  1573. .vxe-body--column{
  1574. border-right-color: var(--vxe-ui-table-border-color);
  1575. }
  1576. }
  1577. }
  1578. &.border--inner,
  1579. &.border--none {
  1580. .vxe-table--header-wrapper {
  1581. background-color: var(--vxe-ui-table-header-background-color);
  1582. }
  1583. .vxe-table--fixed-left-wrapper {
  1584. border-right: 0;
  1585. }
  1586. }
  1587. &.border--inner {
  1588. .vxe-table--border-line {
  1589. border-width: 0 0 1px 0;
  1590. }
  1591. }
  1592. &.border--none {
  1593. .vxe-table--border-line {
  1594. display: none;
  1595. }
  1596. }
  1597. &.size--medium {
  1598. font-size: var(--vxe-ui-font-size-medium);
  1599. .vxe-table--empty-placeholder,
  1600. .vxe-table--empty-block {
  1601. min-height: var(--vxe-ui-table-row-height-medium);
  1602. }
  1603. .vxe-header--column,
  1604. .vxe-body--column,
  1605. .vxe-footer--column {
  1606. &.is--padding {
  1607. .vxe-cell {
  1608. padding: var(--vxe-ui-table-cell-padding-medium);
  1609. .vxe-default-textarea {
  1610. padding: var(--vxe-ui-table-cell-padding-medium);
  1611. }
  1612. }
  1613. }
  1614. }
  1615. .vxe-cell {
  1616. .vxe-default-input,
  1617. .vxe-default-textarea,
  1618. .vxe-default-select {
  1619. height: var(--vxe-ui-input-height-medium);
  1620. }
  1621. .vxe-default-input {
  1622. &[type="date"]::-webkit-inner-spin-button {
  1623. margin-top: 3px;
  1624. }
  1625. }
  1626. }
  1627. .vxe-cell--valid-error-tip {
  1628. padding: 0 var(--vxe-ui-table-cell-padding-medium);
  1629. }
  1630. }
  1631. &.size--small {
  1632. font-size: var(--vxe-ui-font-size-small);
  1633. .vxe-table--empty-placeholder,
  1634. .vxe-table--empty-block {
  1635. min-height: var(--vxe-ui-table-row-height-small);
  1636. }
  1637. .vxe-header--column,
  1638. .vxe-body--column,
  1639. .vxe-footer--column {
  1640. &.is--padding {
  1641. .vxe-cell {
  1642. padding: var(--vxe-ui-table-cell-padding-small);
  1643. .vxe-default-textarea {
  1644. padding: var(--vxe-ui-table-cell-padding-small);
  1645. }
  1646. }
  1647. }
  1648. }
  1649. .vxe-cell {
  1650. .vxe-default-input,
  1651. .vxe-default-textarea,
  1652. .vxe-default-select {
  1653. height: var(--vxe-ui-input-height-small);
  1654. }
  1655. .vxe-default-input {
  1656. &[type="date"]::-webkit-inner-spin-button {
  1657. margin-top: 2px;
  1658. }
  1659. }
  1660. }
  1661. .vxe-cell--valid-error-tip {
  1662. padding: 0 var(--vxe-ui-table-cell-padding-small);
  1663. }
  1664. }
  1665. &.size--mini {
  1666. font-size: var(--vxe-ui-font-size-mini);
  1667. .vxe-table--empty-placeholder,
  1668. .vxe-table--empty-block {
  1669. min-height: var(--vxe-ui-table-row-height-mini);
  1670. }
  1671. .vxe-header--column,
  1672. .vxe-body--column,
  1673. .vxe-footer--column {
  1674. &.is--padding {
  1675. .vxe-cell {
  1676. padding: var(--vxe-ui-table-cell-padding-mini);
  1677. .vxe-default-textarea {
  1678. padding: var(--vxe-ui-table-cell-padding-mini);
  1679. }
  1680. }
  1681. }
  1682. }
  1683. .vxe-cell {
  1684. .vxe-default-input,
  1685. .vxe-default-textarea,
  1686. .vxe-default-select {
  1687. height: var(--vxe-ui-input-height-mini);
  1688. }
  1689. .vxe-default-input {
  1690. &[type="date"]::-webkit-inner-spin-button {
  1691. margin-top: 1px;
  1692. }
  1693. }
  1694. }
  1695. .vxe-cell--valid-error-tip {
  1696. padding: 0 var(--vxe-ui-table-cell-padding-mini);
  1697. }
  1698. }
  1699. .vxe-header--column,
  1700. .vxe-body--column,
  1701. .vxe-footer--column {
  1702. &.is--padding {
  1703. .vxe-cell {
  1704. padding: var(--vxe-ui-table-cell-padding-default);
  1705. .vxe-default-textarea {
  1706. padding: var(--vxe-ui-table-cell-padding-default);
  1707. }
  1708. }
  1709. }
  1710. }
  1711. .vxe-cell {
  1712. white-space: pre-line;
  1713. word-break: break-all;
  1714. }
  1715. // 单元格占位符
  1716. .vxe-cell--placeholder {
  1717. color: var(--vxe-ui-table-cell-placeholder-color);
  1718. }
  1719. // 单选框和复选框
  1720. .vxe-cell--radio {
  1721. @include baseMixin.createRadioIcon();
  1722. }
  1723. .vxe-cell--checkbox {
  1724. @include baseMixin.createCheckboxIcon();
  1725. }
  1726. .fixed--hidden {
  1727. visibility: hidden;
  1728. }
  1729. .vxe-table--fixed-left-wrapper,
  1730. .vxe-table--fixed-right-wrapper {
  1731. width: 100%;
  1732. position: absolute;
  1733. top: 0;
  1734. z-index: 5;
  1735. overflow: hidden;
  1736. background-color: inherit;
  1737. transition: 0.3s box-shadow;
  1738. outline: 0;
  1739. background-color: var(--vxe-ui-layout-background-color);
  1740. &.y-ob--contain {
  1741. & > .vxe-table--body-wrapper {
  1742. & > .vxe-table--body-inner-wrapper {
  1743. overscroll-behavior-y: contain;
  1744. }
  1745. }
  1746. }
  1747. .vxe-table--body-wrapper {
  1748. outline: 0;
  1749. }
  1750. }
  1751. .vxe-table--fixed-left-wrapper {
  1752. .vxe-table--body-wrapper {
  1753. width: calc(100% + 40px);
  1754. }
  1755. }
  1756. &.is--header {
  1757. .vxe-table--fixed-left-wrapper,
  1758. .vxe-table--fixed-right-wrapper {
  1759. .vxe-table--body-wrapper {
  1760. &:before {
  1761. display: none;
  1762. }
  1763. }
  1764. }
  1765. }
  1766. .vxe-table--fixed-left-wrapper {
  1767. left: 0;
  1768. width: 200px;
  1769. &.scrolling--middle {
  1770. box-shadow: var(--vxe-ui-table-fixed-left-scrolling-box-shadow);
  1771. }
  1772. }
  1773. .vxe-table--fixed-right-wrapper {
  1774. right: 0;
  1775. &.scrolling--middle {
  1776. box-shadow: var(--vxe-ui-table-fixed-right-scrolling-box-shadow);
  1777. }
  1778. }
  1779. .vxe-table--header-wrapper,
  1780. .vxe-table--body-wrapper,
  1781. .vxe-table--footer-wrapper {
  1782. position: relative;
  1783. width: 100%;
  1784. &.fixed-left--wrapper,
  1785. &.fixed-right--wrapper {
  1786. position: absolute;
  1787. top: 0;
  1788. outline: 0;
  1789. }
  1790. &.fixed-left--wrapper {
  1791. left: 0;
  1792. }
  1793. &.fixed-right--wrapper {
  1794. right: 0;
  1795. }
  1796. }
  1797. .vxe-body--x-space {
  1798. width: 100%;
  1799. height: 1px;
  1800. margin-bottom: -1px;
  1801. }
  1802. .vxe-body--y-space {
  1803. width: 0;
  1804. float: left;
  1805. }
  1806. /*边框线*/
  1807. .vxe-table--border-line {
  1808. position: absolute;
  1809. top: 0;
  1810. left: 0;
  1811. width: 100%;
  1812. height: 100%;
  1813. z-index: 10;
  1814. pointer-events: none;
  1815. border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1816. }
  1817. /*树形节点*/
  1818. // &.is--tree-line {
  1819. // .vxe-body--row {
  1820. // &:first-child {
  1821. // .vxe-tree--line {
  1822. // border-width: 0 0 1px 0;
  1823. // }
  1824. // }
  1825. // }
  1826. // .vxe-body--row {
  1827. // .vxe-body--column {
  1828. // background-image: none;
  1829. // }
  1830. // }
  1831. // }
  1832. .vxe-tree--line-wrapper {
  1833. position: relative;
  1834. display: block;
  1835. height: 0;
  1836. }
  1837. .vxe-tree--line {
  1838. content: "";
  1839. position: absolute;
  1840. bottom: -1.5em;
  1841. width: 0.8em;
  1842. border-width: 0 0 1px 1px;
  1843. border-style: var(--vxe-ui-table-tree-node-line-style);
  1844. border-color: var(--vxe-ui-table-tree-node-line-color);
  1845. pointer-events: none;
  1846. }
  1847. .vxe-row-group--tree-node,
  1848. .vxe-cell--tree-node {
  1849. position: relative;
  1850. }
  1851. .vxe-cell--tree-btn {
  1852. &:hover {
  1853. color: var(--vxe-ui-font-color);
  1854. }
  1855. & > i {
  1856. display: block;
  1857. color: var(--vxe-ui-font-lighten-color);
  1858. @include baseMixin.createAnimationTransition(transform);
  1859. // background-color: var(--vxe-ui-layout-background-color); // 影响选择行相关
  1860. }
  1861. }
  1862. .vxe-row-group-cell,
  1863. .vxe-tree-cell {
  1864. display: block;
  1865. padding-left: 1.5em;
  1866. }
  1867. .vxe-cell--tree-btn,
  1868. .vxe-row-group--node-btn{
  1869. position: absolute;
  1870. top: 50%;
  1871. width: 1em;
  1872. height: 1em;
  1873. text-align: center;
  1874. transform: translateY(-50%);
  1875. z-index: 1;
  1876. user-select: none;
  1877. cursor: pointer;
  1878. }
  1879. /*行分组*/
  1880. .vxe-row-group--node-btn {
  1881. &:hover {
  1882. color: var(--vxe-ui-font-color);
  1883. }
  1884. & > i {
  1885. display: block;
  1886. color: var(--vxe-ui-font-lighten-color);
  1887. @include baseMixin.createAnimationTransition(transform);
  1888. }
  1889. }
  1890. /*单元格高度*/
  1891. .vxe-body--column {
  1892. &.col--ellipsis {
  1893. & > .vxe-cell {
  1894. .vxe-row-group-cell,
  1895. .vxe-tree-cell {
  1896. overflow: hidden;
  1897. text-overflow: ellipsis;
  1898. white-space: nowrap;
  1899. }
  1900. }
  1901. }
  1902. &.col--cs-height,
  1903. &.col--rs-height,
  1904. &.col--auto-height {
  1905. overflow: hidden;
  1906. &.col--tree-node,
  1907. &.col--valid-error {
  1908. overflow: unset;
  1909. }
  1910. & > .vxe-cell {
  1911. overflow: hidden;
  1912. }
  1913. }
  1914. & > .vxe-cell {
  1915. display: flex;
  1916. flex-direction: row;
  1917. align-items: center;
  1918. }
  1919. }
  1920. /*溢出列*/
  1921. .vxe-header--column,
  1922. .vxe-body--column,
  1923. .vxe-footer--column {
  1924. &:not(.col--active) {
  1925. &.col--ellipsis {
  1926. & > .vxe-cell {
  1927. overflow: hidden;
  1928. & > .vxe-cell--wrapper {
  1929. overflow: hidden;
  1930. text-overflow: ellipsis;
  1931. white-space: nowrap;
  1932. }
  1933. }
  1934. }
  1935. &.vxe-row-group-cell,
  1936. &.vxe-tree-cell,
  1937. &.col--vertical-top {
  1938. & > .vxe-cell {
  1939. & > .vxe-cell--wrapper {
  1940. white-space: pre-line;
  1941. }
  1942. }
  1943. }
  1944. }
  1945. }
  1946. .vxe-header--column,
  1947. .vxe-footer--column {
  1948. &.col--ellipsis {
  1949. & > .vxe-cell {
  1950. .vxe-cell--wrapper {
  1951. overflow: hidden;
  1952. text-overflow: ellipsis;
  1953. white-space: nowrap;
  1954. }
  1955. }
  1956. }
  1957. & > .vxe-cell {
  1958. display: flex;
  1959. flex-direction: row;
  1960. align-items: center;
  1961. }
  1962. }
  1963. /*展开行*/
  1964. .vxe-table--row-expanded-wrapper {
  1965. position: absolute;
  1966. top: 0;
  1967. left: 0;
  1968. width: 100%;
  1969. height: 100%;
  1970. overflow: hidden;
  1971. pointer-events: none;
  1972. }
  1973. .vxe-body--row-expanded-cell {
  1974. position: absolute;
  1975. z-index: 5;
  1976. top: 0;
  1977. left: 0;
  1978. width: 100%;
  1979. overflow: auto;
  1980. background-color: var(--vxe-ui-layout-background-color);
  1981. pointer-events: all;
  1982. &.is--padding {
  1983. padding: var(--vxe-ui-table-expand-padding-default);
  1984. }
  1985. }
  1986. .vxe-body--row-expanded-place-column {
  1987. border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1988. border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  1989. }
  1990. .vxe-table--expanded {
  1991. cursor: pointer;
  1992. .vxe-table--expand-btn {
  1993. display: inline-block;
  1994. width: 1em;
  1995. height: 1em;
  1996. text-align: center;
  1997. user-select: none;
  1998. color: var(--vxe-ui-font-lighten-color);
  1999. @include baseMixin.createAnimationTransition(transform);
  2000. &:hover {
  2001. color: var(--vxe-ui-font-color);
  2002. }
  2003. }
  2004. &+.vxe-table--expand-label {
  2005. padding-left: 0.5em;
  2006. }
  2007. }
  2008. .vxe-body--expanded-row {
  2009. &.is--padding {
  2010. & > .vxe-body--expanded-column {
  2011. & > .vxe-body--expanded-cell {
  2012. padding: var(--vxe-ui-table-expand-padding-default);
  2013. }
  2014. }
  2015. }
  2016. }
  2017. .vxe-body--expanded-column {
  2018. border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  2019. border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
  2020. &.col--ellipsis {
  2021. & > .vxe-body--expanded-cell {
  2022. overflow: hidden;
  2023. text-overflow: ellipsis;
  2024. white-space: nowrap;
  2025. }
  2026. }
  2027. }
  2028. .vxe-body--expanded-cell {
  2029. position: relative;
  2030. z-index: 1;
  2031. &.is--ellipsis {
  2032. overflow: auto;
  2033. outline: 0;
  2034. }
  2035. }
  2036. /*拖拽列*/
  2037. .vxe-table--column {
  2038. &.col--drag-move {
  2039. transition: transform 0.5s ease;
  2040. }
  2041. &.col--drag-origin {
  2042. & > .vxe-cell {
  2043. opacity: 0.3;
  2044. }
  2045. }
  2046. }
  2047. /*拖拽行把柄*/
  2048. .vxe-cell--drag-handle {
  2049. user-select: none;
  2050. & + span {
  2051. padding-left: 0.5em;
  2052. }
  2053. &:not(.is--disabled) {
  2054. cursor: grab;
  2055. &:active {
  2056. cursor: grabbing;
  2057. }
  2058. &:hover {
  2059. color: var(--vxe-ui-font-primary-color);
  2060. }
  2061. }
  2062. &.is--disabled {
  2063. color: var(--vxe-ui-input-disabled-color);
  2064. cursor: not-allowed;
  2065. }
  2066. }
  2067. .vxe-body--row {
  2068. &.row--drag-move {
  2069. transition: transform 0.5s ease;
  2070. }
  2071. &.row--drag-origin {
  2072. & > .vxe-body--column {
  2073. & > .vxe-cell {
  2074. opacity: 0.3;
  2075. }
  2076. }
  2077. }
  2078. }
  2079. .vxe-body--column {
  2080. &.is--drag-cell {
  2081. user-select: none;
  2082. &:not(.is--drag-disabled) {
  2083. cursor: grab;
  2084. &:active {
  2085. cursor: grabbing;
  2086. }
  2087. &:hover {
  2088. color: var(--vxe-ui-font-primary-color);
  2089. }
  2090. }
  2091. &.is--drag-disabled {
  2092. color: var(--vxe-ui-input-disabled-color);
  2093. cursor: not-allowed;
  2094. }
  2095. }
  2096. }
  2097. &.size--medium {
  2098. .vxe-cell--checkbox {
  2099. font-size: var(--vxe-checkbox-font-size-medium);
  2100. }
  2101. .vxe-cell--radio {
  2102. font-size: var(--vxe-radio-font-size-medium);
  2103. }
  2104. }
  2105. &.size--small {
  2106. .vxe-cell--checkbox {
  2107. font-size: var(--vxe-checkbox-font-size-small);
  2108. }
  2109. .vxe-cell--radio {
  2110. font-size: var(--vxe-radio-font-size-small);
  2111. }
  2112. }
  2113. &.size--mini {
  2114. .vxe-cell--checkbox {
  2115. font-size: var(--vxe-checkbox-font-size-mini);
  2116. }
  2117. .vxe-cell--radio {
  2118. font-size: var(--vxe-radio-font-size-mini);
  2119. }
  2120. }
  2121. /*暂无数据*/
  2122. .vxe-table--empty-placeholder,
  2123. .vxe-table--empty-block {
  2124. color: var(--vxe-ui-input-placeholder-color);
  2125. min-height: var(--vxe-ui-table-row-height-default);
  2126. justify-content: center;
  2127. align-items: center;
  2128. text-align: center;
  2129. overflow: hidden;
  2130. width: 100%;
  2131. pointer-events: none;
  2132. outline: 0;
  2133. }
  2134. .vxe-table--empty-block {
  2135. display: none;
  2136. visibility: hidden;
  2137. }
  2138. .vxe-table--empty-place-wrapper {
  2139. display: none;
  2140. position: absolute;
  2141. width: 100%;
  2142. top: 0;
  2143. z-index: 5;
  2144. overflow: hidden;
  2145. }
  2146. .vxe-table--empty-placeholder {
  2147. display: flex;
  2148. }
  2149. .vxe-table--empty-content {
  2150. display: block;
  2151. width: 50%;
  2152. pointer-events: auto;
  2153. }
  2154. &.is--empty {
  2155. .vxe-table--empty-block,
  2156. .vxe-table--empty-place-wrapper{
  2157. display: flex;
  2158. }
  2159. }
  2160. .vxe-body--column {
  2161. &.col--selected {
  2162. box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
  2163. }
  2164. }
  2165. /*校验不通过*/
  2166. .vxe-body--column {
  2167. .vxe-cell--valid-error-tip {
  2168. width: 100%;
  2169. position: absolute;
  2170. left: 50%;
  2171. font-size: 12px;
  2172. line-height: 1em;
  2173. transform: translate(-50%, -50%);
  2174. text-align: left;
  2175. z-index: 4;
  2176. padding: 0 var(--vxe-ui-table-cell-padding-default);
  2177. pointer-events: none;
  2178. }
  2179. .vxe-cell--valid-error-wrapper {
  2180. display: inline-block;
  2181. border-radius: var(--vxe-ui-border-radius);
  2182. pointer-events: auto;
  2183. }
  2184. .vxe-cell--valid-error-theme-beautify {
  2185. padding: 0.2em 0.6em 0.25em 0.6em;
  2186. color: #fff;
  2187. background-color: var(--vxe-ui-table-validate-error-color);
  2188. .vxe-cell--valid-error-msg {
  2189. background: transparent;
  2190. }
  2191. }
  2192. .vxe-cell--valid-error-theme-normal {
  2193. color: var(--vxe-ui-table-validate-error-color);
  2194. background-color: var(--vxe-ui-table-validate-error-background-color);
  2195. }
  2196. &.col--active,
  2197. &.col--selected {
  2198. position: relative;
  2199. }
  2200. &.col--valid-error {
  2201. .vxe-default-input,
  2202. .vxe-default-textarea,
  2203. .vxe-default-select {
  2204. border-color: var(--vxe-ui-table-validate-error-color);
  2205. }
  2206. .vxe-input,
  2207. .vxe-ico-picker {
  2208. border-color: var(--vxe-ui-table-validate-error-color);
  2209. }
  2210. }
  2211. }
  2212. &.valid-msg--single {
  2213. .vxe-body--row {
  2214. &:last-child {
  2215. .vxe-cell--valid-error-tip {
  2216. bottom: calc(100%);
  2217. transform: translate(-50%, 50%);
  2218. }
  2219. &:first-child {
  2220. .vxe-cell--valid-error-tip {
  2221. bottom: auto;
  2222. transform: translate(-50%, -50%);
  2223. }
  2224. }
  2225. }
  2226. }
  2227. }
  2228. &.valid-msg--full {
  2229. .vxe-body--row {
  2230. &:last-child {
  2231. .vxe-cell--valid-error-tip {
  2232. top: calc(100% - 1.3em);
  2233. }
  2234. }
  2235. }
  2236. }
  2237. /*已废弃,旧的校验样式**/
  2238. &.old-cell-valid {
  2239. .vxe-body--column {
  2240. &.col--valid-error {
  2241. .vxe-cell--valid-error-tip {
  2242. width: 320px;
  2243. position: absolute;
  2244. bottom: calc(100% + 4px);
  2245. left: 50%;
  2246. transform: translateX(-50%);
  2247. text-align: center;
  2248. pointer-events: none;
  2249. z-index: 4;
  2250. .vxe-cell--valid-error-msg {
  2251. display: inline-block;
  2252. border-radius: -var(-vxe-border-radius);
  2253. padding: 8px 12px;
  2254. color: #fff;
  2255. background-color: #f56c6c;
  2256. pointer-events: auto;
  2257. }
  2258. }
  2259. }
  2260. }
  2261. .vxe-body--row {
  2262. &:first-child {
  2263. .vxe-cell--valid-error-tip {
  2264. bottom: auto;
  2265. top: calc(100% + 4px);
  2266. }
  2267. }
  2268. }
  2269. .vxe-body--column {
  2270. &:first-child {
  2271. .vxe-cell--valid-error-tip {
  2272. left: 10px;
  2273. transform: translateX(0);
  2274. text-align: left;
  2275. }
  2276. }
  2277. }
  2278. }
  2279. /*单元格标记删除状态*/
  2280. .vxe-body--row {
  2281. &.row--pending {
  2282. color: var(--vxe-ui-table-validate-error-color);
  2283. text-decoration: line-through;
  2284. cursor: no-drop;
  2285. .vxe-body--column {
  2286. position: relative;
  2287. &:after {
  2288. content: "";
  2289. position: absolute;
  2290. top: 50%;
  2291. left: 0;
  2292. width: 100%;
  2293. height: 0;
  2294. border-bottom: 1px solid var(--vxe-ui-table-validate-error-color);
  2295. z-index: 1;
  2296. }
  2297. }
  2298. }
  2299. }
  2300. /*单元格编辑状态*/
  2301. .vxe-body--row {
  2302. &.row--new {
  2303. & > .vxe-body--column {
  2304. position: relative;
  2305. &:before {
  2306. content: "";
  2307. top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
  2308. left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
  2309. position: absolute;
  2310. border-width: var(--vxe-ui-table-cell-dirty-width);
  2311. border-style: solid;
  2312. border-color: transparent var(--vxe-ui-table-cell-dirty-insert-color) transparent transparent;
  2313. transform: rotate(45deg);
  2314. }
  2315. }
  2316. }
  2317. }
  2318. .vxe-body--column {
  2319. &.col--dirty {
  2320. position: relative;
  2321. &:before {
  2322. content: "";
  2323. top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
  2324. left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
  2325. position: absolute;
  2326. border-width: var(--vxe-ui-table-cell-dirty-width);
  2327. border-style: solid;
  2328. border-color: transparent var(--vxe-ui-table-cell-dirty-update-color) transparent transparent;
  2329. transform: rotate(45deg);
  2330. }
  2331. }
  2332. }
  2333. /*可编辑*/
  2334. &.vxe-editable {
  2335. &.cell--highlight {
  2336. .vxe-body--column {
  2337. &.col--active {
  2338. box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
  2339. &.col--valid-error {
  2340. box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-table-validate-error-color);
  2341. }
  2342. .vxe-cell {
  2343. .vxe-default-input,
  2344. .vxe-default-textarea {
  2345. border: 0;
  2346. padding: 0;
  2347. }
  2348. .vxe-input {
  2349. .vxe-input--inner {
  2350. border: 0;
  2351. padding-left: 0;
  2352. }
  2353. }
  2354. }
  2355. }
  2356. }
  2357. }
  2358. .vxe-body--column {
  2359. padding: 0;
  2360. }
  2361. }
  2362. }
  2363. /*valid error*/
  2364. div.vxe-table--tooltip-wrapper {
  2365. &.vxe-table--valid-error {
  2366. padding: 0;
  2367. color: var(--vxe-ui-table-validate-error-color);
  2368. background-color: var(--vxe-ui-table-validate-error-background-color);
  2369. &.old-cell-valid {
  2370. padding: 8px 12px;
  2371. background-color: #f56c6c;
  2372. color: #fff;
  2373. }
  2374. }
  2375. }
  2376. /*footer*/
  2377. .vxe-table--footer-wrapper {
  2378. color: var(--vxe-ui-table-footer-font-color);
  2379. &.body--wrapper{
  2380. outline: 0;
  2381. }
  2382. }