singleLayerSelecte.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div class="singleLayersSelecte">
  3. <div class="selectBox">
  4. <div class="selectLeft">
  5. <div class="title">{{title}}</div>
  6. <div class="selectBox1">
  7. <span class="selectLists">
  8. <a-checkbox
  9. :indeterminate="indeterminate"
  10. :checked="checkAll"
  11. @change="onCheckAllChange"
  12. >全选</a-checkbox>
  13. </span>
  14. <a-checkbox-group
  15. v-model="checkedList"
  16. :options="plainOptions"
  17. @change="checkGroupChange"
  18. class="selectList"
  19. ></a-checkbox-group>
  20. </div>
  21. </div>
  22. <div class="selectRight">
  23. <div class="title">
  24. 已选
  25. <a-button class="clearAllBtn" type="link" @click="clearAll">清空</a-button>
  26. </div>
  27. <div class="selectBox1">
  28. <span class="selectListitem" v-for="(item,index) in checkedShowList" :key="index">
  29. {{item}}
  30. <a-icon type="close" id="close" @click="deleteItem(item)" />
  31. </span>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  39. // const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
  40. // const defaultCheckedList = ['Apple', 'Orange'];
  41. export default {
  42. data() {
  43. return {
  44. //选择框
  45. checkedList: [],
  46. checkedShowList: [],
  47. indeterminate: false,
  48. checkAll: false,
  49. plainOptions: [],
  50. valueOptions: [],
  51. }
  52. },
  53. watch: {
  54. checkedList: {
  55. handler(n,o){
  56. this.$emit('getCheckedList', this.checkedList)
  57. },
  58. deep: true,
  59. immediate: true,
  60. },
  61. listArr:{
  62. handler(n,o){
  63. this.plainOptions = this.listArr
  64. this.valueOptions=[];
  65. this.listArr.forEach((item) => {
  66. this.valueOptions.push(item.value)
  67. })
  68. },
  69. deep: true,
  70. immediate: true,
  71. },
  72. checked: {
  73. handler(n, o) {
  74. this.checkedList=[]
  75. this.checkedShowList=[];
  76. this.plainOptions = this.listArr
  77. this.valueOptions=[];
  78. this.listArr.forEach((item) => {
  79. this.valueOptions.push(item.value)
  80. })
  81. if (this.checked.length) {
  82. this.checkedList = this.checked;
  83. // console.log(this.checkedList,this.plainOptions)
  84. this.checkedList.forEach((ele, i) => {
  85. this.plainOptions.forEach((item, index) => {
  86. if (item.value == ele) {
  87. this.checkedShowList.push(item.label)
  88. }
  89. })
  90. })
  91. this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  92. this.checkAll = this.checkedList.length === this.plainOptions.length
  93. }
  94. },
  95. deep: true,
  96. immediate: true,
  97. },
  98. },
  99. props: ['title', 'listArr', 'checked'],
  100. methods: {
  101. //手机品牌多选的事件
  102. checkGroupChange(checkedList) {
  103. this.checkedShowList = []
  104. // console.log(checkedList)
  105. this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
  106. this.checkAll = checkedList.length === this.plainOptions.length
  107. checkedList.forEach((ele, i) => {
  108. this.plainOptions.forEach((item, index) => {
  109. if (item.value == ele) {
  110. this.checkedShowList.push(item.label)
  111. }
  112. })
  113. })
  114. // this.$emit('getCheckedList', this.checkedList)
  115. },
  116. onCheckAllChange(e) {
  117. // console.log(e.target.checked,this.valueOptions)
  118. Object.assign(this, {
  119. checkedList: e.target.checked ? this.valueOptions : [],
  120. indeterminate: false,
  121. checkAll: e.target.checked,
  122. })
  123. this.checkedList.forEach((ele, i) => {
  124. this.plainOptions.forEach((item, index) => {
  125. if (item.value == ele) {
  126. this.checkedShowList.push(item.label)
  127. }
  128. })
  129. })
  130. if (!e.target.checked) {
  131. this.checkedShowList = []
  132. }
  133. // console.log(this.checkedList)
  134. // this.$emit('getCheckedList', this.checkedList)
  135. },
  136. deleteItem(item) {
  137. // console.log(item)
  138. let val = ''
  139. this.plainOptions.forEach((ele, index) => {
  140. if (ele.label == item) {
  141. val = ele.value
  142. }
  143. })
  144. this.checkedList = this.checkedList.filter((element, index) => {
  145. return element != val
  146. })
  147. this.checkedShowList = this.checkedShowList.filter((element, index) => {
  148. return element != item
  149. })
  150. if (this.checkedList.length == 0) {
  151. this.indeterminate = false
  152. this.checkAll = false
  153. }
  154. // this.$emit('getCheckedList', this.checkedList)
  155. },
  156. clearAll() {
  157. this.checkedList = []
  158. this.indeterminate = false
  159. this.checkAll = false
  160. this.checkedShowList = []
  161. // this.$emit('getCheckedList', this.checkedList)
  162. },
  163. },
  164. mounted() {
  165. this.plainOptions = this.listArr
  166. this.valueOptions=[];
  167. this.listArr.forEach((item) => {
  168. this.valueOptions.push(item.value)
  169. })
  170. // if (this.checked.length) {
  171. // this.checkedList = this.checked
  172. // this.checkedList.forEach((ele, i) => {
  173. // this.plainOptions.forEach((item, index) => {
  174. // if (item.value == ele) {
  175. // this.checkedShowList.push(item.label)
  176. // }
  177. // })
  178. // })
  179. // this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
  180. // this.checkAll = this.checkedList.length === this.plainOptions.length
  181. // }else{
  182. // this.checkedList = []
  183. // }
  184. },
  185. }
  186. </script>
  187. <style lang="scss" scoped>
  188. .singleLayersSelecte {
  189. margin-top: 20px;
  190. .selectBox {
  191. display: flex;
  192. .title {
  193. background: #f9f9f9;
  194. font-size: 14px;
  195. font-weight: 700;
  196. padding: 0 15px;
  197. border-bottom: 1px solid #ddd;
  198. text-align: left;
  199. position: relative;
  200. border-radius: 5px 5px 0 0;
  201. .clearAllBtn{
  202. position: absolute;
  203. top: 3px;
  204. right: 0;
  205. }
  206. }
  207. .selectLeft {
  208. width: 40%;
  209. margin-right: 2%;
  210. border: 1px solid #ddd;
  211. border-radius: 5px;
  212. }
  213. .selectRight {
  214. width: 20%;
  215. border: 1px solid #ddd;
  216. border-radius: 5px;
  217. }
  218. .selectBox1 {
  219. height: 250px;
  220. overflow: auto;
  221. .selectList {
  222. display: block;
  223. width: 100%;
  224. // padding: 0 15px;
  225. // padding: 3px 0;
  226. }
  227. .selectLists {
  228. display: block;
  229. width: 100%;
  230. padding: 0 15px;
  231. }
  232. .selectLists:hover {
  233. background-color: rgba(0, 0, 0, 0.1);
  234. }
  235. .selectListitem {
  236. display: block;
  237. height: 25px;
  238. line-height: 25px;
  239. background-color: #eee;
  240. border-radius: 5px;
  241. padding: 0 10px;
  242. margin: 8px 10px;
  243. position: relative;
  244. #close {
  245. font-size: 12px;
  246. position: absolute;
  247. right: 10px;
  248. top: 5px;
  249. cursor: pointer;
  250. }
  251. }
  252. }
  253. }
  254. }
  255. </style>