项目初始化

datax-ui/src/views/chartboard/chart/make.vue

@@ -16,12 +16,12 @@
           </div>
           <div style="margin: -20px;">
             <div class="field-widget-cate"><i class="icon iconfont icon-weidu"></i><span>维度列</span></div>
-            <draggable v-model="dimensions" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
-              <li v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
+            <draggable v-model="dimensions" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
+              <el-tag v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
             </draggable>
             <div class="field-widget-cate"><i class="icon iconfont icon-zhibiao"></i><span>指标列</span></div>
-            <draggable v-model="measures" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
-              <li v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
+            <draggable v-model="measures" class="field-widget-tag" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
+              <el-tag v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></el-tag>
             </draggable>
           </div>
         </el-card>
@@ -222,19 +222,20 @@ export default {
         font-size: 13px;
         background-color: #f5f7fa;
         border-bottom: 1px solid #e4e7ed;
+        .icon {
+          margin-right: 6px;
+        }
       }
-      ul {
+      .field-widget-tag {
         position: relative;
         overflow: hidden;
         padding: 10px 10px;
         margin: 0;
         min-height: 200px;
-      }
         .field-widget-label {
           font-size: 12px;
           display: block;
           width: 48%;
-        line-height: 25px;
           position: relative;
           float: left;
           left: 0;
@@ -251,19 +252,7 @@ export default {
           & > div {
             display: block;
             cursor: move;
-          background: #F4F6FC;
-          border: 1px solid #F4F6FC;
             text-align: center;
-          .icon {
-            margin-right: 6px;
-            margin-left: 8px;
-            font-size: 14px;
-            display: inline-block;
-            vertical-align: middle;
-          }
-          span {
-            display: inline-block;
-            vertical-align: middle;
           }
         }
       }
@@ -302,7 +291,7 @@ export default {
           display: inline-block;
           border: 1px solid #ebecef;
           height: 32px;
-          line-height: 30px;
+          line-height: 35px;
           border-radius: 4px;
           .draggable-item-handle {
             background-color: #ecf5ff;