树已选择列表组件

src/app-register.ts

@@ -144,5 +144,7 @@ export const AppComponents = {
         v.component('app-mob-actionsheet',() => import('@/components/app-mob-actionsheet/app-mob-actionsheet.vue'));
         // 地图定位
         v.component('app-mob-map',() => import('@/components/app-mob-map/app-mob-map.vue'));
+        // 树已选择列表
+        v.component('app-select-tree-list',() => import('@/components/app-select-tree-list/app-select-tree-list.vue'));
     },
 };
\ No newline at end of file

src/components/app-select-tree-list/app-select-tree-list.less

+.app-select-tree-list{
+    font-size: 14px;
+    .app-select-tree-list-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 20px;
+        border-bottom: solid #efefef .2px;
+        align-items: center;
+        .header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .delete {
+            color: #f85b46;
+            
+        }
+        .index_text {
+            width: 30px;
+            height: 30px;
+            background: #ccc;
+            margin-right: 10px;
+            text-align: center;
+            line-height: 30px;
+            border-radius: 4px;
+        }
+    }
+}
\ No newline at end of file

src/components/app-select-tree-list/app-select-tree-list.vue

+<template>
+  <div class="app-select-tree-list">
+    <div v-for="item in items" :key="item.srfkey" class="app-select-tree-list-item" >
+      <div class="header">
+        <div class="index_text">{{getindexText(item.srfmajortext)}}</div>
+        <div class="text">{{item.srfmajortext}}</div>
+      </div>
+      <div class="delete" @click="item_delete(item)">移除</div>
+      </div>
+  </div>
+</template>
+<script lang="ts">
+import {  Vue,  Component,  Prop,  Provide,  Emit,  Watch} from "vue-property-decorator";
+
+@Component({})
+export default class AppSelectTreeList extends Vue{
+
+  /**
+   * 传入item
+   * @type {any}
+   * @memberof AppSelectTreeList
+   */
+  @Prop() public items?:any;
+
+  /**
+   * 渲染数据
+   * @type {any}
+   * @memberof AppSelectTreeList
+   */
+  public data :any = [];
+
+
+  /**
+   * getindexText
+   */
+  public getindexText(item:string) {
+    return item.trim().substring(0,1);
+  }
+
+  @Watch('items')
+  onItemsChange(){
+
+  }
+
+
+  /**
+   * item_delete
+   */
+  public item_delete(item:any) {
+    this.$emit('item_delete',item);
+    this.data
+  }
+
+};
+</script>
+<style lang="less">
+@import "./app-select-tree-list.less";
+</style>
\ No newline at end of file