当前位置:   article > 正文

vue+element table组件点击行选中同时高亮_vue3中实现el-table通过ctrl或shift批量选择节点并高亮展示

vue3中实现el-table通过ctrl或shift批量选择节点并高亮展示
  1. <template>
  2. <div class="compoent-content">
  3. <!--数据展示部分-->
  4. <div class="formList">
  5. <el-table
  6. ref="elTable"
  7. v-loading="listLoading"
  8. :key="tableKey"
  9. :data="optionsList"
  10. :empty-text="emptyText"
  11. border
  12. stripe
  13. fit
  14. highlight-current-row
  15. max-height="300"
  16. style="width: 100%"
  17. :row-class-name="tableRowClassName"
  18. @select="handleSelect"
  19. @select-all="handselectall"
  20. @row-click="handleClick"
  21. >
  22. <el-table-column type="selection" align="center" width="55" fixed />
  23. <el-table-column label="预约选项" align="center">
  24. <template slot-scope="scope">
  25. <span>{{ scope.row.text }}</span>
  26. </template>
  27. </el-table-column>
  28. </el-table>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import { handleMessage, handleConfirm, handleNotify } from "@/utils/popup";
  34. import { queryDataDicsApi } from "@/api/common";
  35. import { isNullOfEmpty } from "@/utils/index";
  36. export default {
  37. name: "options",
  38. props: {
  39. list: {
  40. type: Object,
  41. // default: ()=>{}
  42. },
  43. },
  44. data() {
  45. return {
  46. tableKey: 0, // 表格唯一标识
  47. optionsList: [],
  48. temp: {
  49. id: undefined,
  50. text: "",
  51. },
  52. listLoading: false,
  53. emptyText: "暂无数据",
  54. keyword: "",
  55. selArr: [],
  56. };
  57. },
  58. watch: {},
  59. created() {
  60. this.getList();
  61. },
  62. methods: {
  63. getList() {
  64. // 请求列表数据
  65. this.listLoading = true;
  66. this.emptyText = "暂无数据";
  67. const dicType = "5";
  68. queryDataDicsApi(dicType)
  69. .then((response) => {
  70. this.listLoading = false;
  71. const res = response.data;
  72. if (res.code === 1) {
  73. let optionsList = res.data;
  74. var newArray = optionsList.map((item, index) => {
  75. return Object.assign(item, { className: "normal" });
  76. });
  77. this.optionsList = newArray;
  78. //表格错位重排
  79. this.$nextTick(() => {
  80. this.$refs.elTable.doLayout();
  81. });
  82. } else {
  83. handleMessage("请求数据失败:" + res.msg, "error");
  84. }
  85. })
  86. .catch((err) => {
  87. this.listLoading = false;
  88. this.emptyText = "请求出错:" + err.message;
  89. });
  90. },
  91. // 变色样式监听
  92. tableRowClassName({ row, rowIndex }) {
  93. let color = "";
  94. for (let item of this.selArr.values()) {
  95. if (item.id === row.id) color = "table-SelectedRow-bgcolor";
  96. }
  97. return color;
  98. },
  99. // 全选变色
  100. handselectall(val) {
  101. this.handleSelect(val);
  102. },
  103. /* 获取当前选中的数据 */
  104. handleSelect(row) {
  105. this.selArr = [];
  106. if (row.length > 0) {
  107. row.forEach((value, index) => {
  108. this.selArr.push(value);
  109. });
  110. }
  111. this.$emit("optionsClick", this.selArr);
  112. },
  113. handleClick(row) {
  114. let findRow = this.selArr.find((c) => c.id == row.id);
  115. if (findRow) {
  116. let findIndex = undefined;
  117. this.selArr.forEach((item, index) => {
  118. if (item.id == findRow.id) {
  119. findIndex = index;
  120. }
  121. });
  122. this.selArr.splice(findIndex, 1);
  123. this.$refs.elTable.toggleRowSelection(row, false);
  124. this.$emit("optionsClick", this.selArr);
  125. return;
  126. }
  127. this.selArr.push(row);
  128. this.$refs.elTable.toggleRowSelection(row, true);
  129. this.$emit("optionsClick", this.selArr);
  130. },
  131. clearFrom() {
  132. this.selArr = [];
  133. this.$refs.elTable.clearSelection();
  134. this.$refs.elTable.setCurrentRow();
  135. },
  136. },
  137. };
  138. </script>
  139. <style lang="scss" scoped>
  140. .compoent-content {
  141. margin: 0 auto;
  142. width: 65%;
  143. .type-item {
  144. position: relative;
  145. float: left;
  146. padding: 0px 18px;
  147. margin-right: 28px;
  148. line-height: 30px;
  149. text-align: center;
  150. border: 1px solid #ccc;
  151. border-radius: 3px;
  152. }
  153. .add-icon {
  154. font-size: 20px;
  155. cursor: pointer;
  156. }
  157. .submit {
  158. text-align: center;
  159. box-sizing: border-box;
  160. }
  161. }
  162. /deep/ {
  163. .table-SelectedRow-bgcolor {
  164. td {
  165. background-color: #69a8ea !important;
  166. color: #fff;
  167. }
  168. }
  169. }
  170. </style>

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签