update

src/components/filter-tree/filter-mode.vue

 <template>
-    <el-select size="small" class="filter-mode" placeholder="条件逻辑" clearable v-model="curVal" @change="onChange">
+    <el-select size="small" class="filter-mode" placeholder="条件逻辑" v-model="curVal" @change="onChange">
         <el-option
             v-for="mode in filterMode"
             :key="mode.value"
-            :label="mode.en"
+            :label="mode.zh"
             :value="mode.value"
             >
         </el-option>
@@ -44,20 +44,20 @@ export default class FilterMode extends Vue {
         // { name: 'AND', value: '$and' },
         // { name: 'OR', value: '$or' },
         { zh: '等于(=)', en: 'EQ', value: '$eq' },
-        { zh: '', en: 'NE', value: '$ne' },
-        { zh: '', en: 'GT', value: '$gt' },
-        { zh: '', en: 'GE', value: '$gte' },
-        { zh: '', en: 'LT', value: '$lt' },
-        { zh: '', en: 'LE', value: '$lte' },
-        { zh: '', en: 'IS_NULL', value: '$null' },
-        { zh: '', en: 'IS_NOT_NULL', value: '$notNull' },
-        { zh: '', en: 'IN', value: '$in' },
-        { zh: '', en: 'NOTIN', value: '$notIn' },
-        { zh: '', en: 'LIKE', value: '$like' },
-        { zh: '', en: 'LIFTLIKE', value: '$startsWith' },
-        { zh: '', en: 'RIGHTLIKE', value: '$endsWith' },
-        { zh: '', en: 'EXISTS', value: '$exists' },
-        { zh: '', en: 'NOTEXISTS', value: '$notExists' }
+        { zh: '不等于(<>)', en: 'NE', value: '$ne' },
+        { zh: '大于(>)', en: 'GT', value: '$gt' },
+        { zh: '大于等于(>=)', en: 'GE', value: '$gte' },
+        { zh: '小于(<)', en: 'LT', value: '$lt' },
+        { zh: '小于(<=)', en: 'LE', value: '$lte' },
+        { zh: '值为空(Nil)', en: 'IS_NULL', value: '$null' },
+        { zh: '值不为空(NotNil)', en: 'IS_NOT_NULL', value: '$notNull' },
+        { zh: '值在范围中(In)', en: 'IN', value: '$in' },
+        { zh: '值不在范围中(NotIn)', en: 'NOTIN', value: '$notIn' },
+        { zh: '文本包含(%)', en: 'LIKE', value: '$like' },
+        { zh: '文本左包含(%#)', en: 'LIFTLIKE', value: '$startsWith' },
+        { zh: '文本右包含(#%)', en: 'RIGHTLIKE', value: '$endsWith' },
+        // { zh: '', en: 'EXISTS', value: '$exists' },
+        // { zh: '', en: 'NOTEXISTS', value: '$notExists' }
     ];
 
     /**

src/components/filter-tree/filter-tree.less

-.filter-item {
-    display: flex;
-    // margin-top: 10px;
-    .fa-trash-o {
-        color: red;
-    }
-    .filter-item-group {
-        width: 100px;
-        margin-left: 5px;
-    }
-    .filter-item-field {
-        width: 200px;
-        margin-left: 5px;
-    }
-    .filter-item-mode {
-        width: 200px;
-        margin-left: 5px;
-    }
-    .filter-item-value {
-        margin-left: 5px;
-        flex-grow: 1;
-    }
-}
 .filter-tree {
     .el-tree-node__content {
         height: 40px;

src/components/filter-tree/filter-tree.vue

 <template>
-    <el-tree class="filter-tree" :data="treeItems" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
+    <el-tree class="filter-tree" :data="treeItems" :expand-on-click-node="false" default-expand-all>
         <template slot-scope="{ node, data }">
-            <template v-if="Object.is(data.name, '$and') || Object.is(data.name, '$or')">
+            <template v-if="Object.is(data.label, '$and') || Object.is(data.label, '$or')">
                 <div class="filter-tree-item">
-                    <el-select size="small" v-model="data.name">
+                    <el-select size="small" v-model="data.label" :disabled="data.isroot">
                         <el-option v-for="mode in relationModes" :key="mode.value" :label="mode.zh" :value="mode.value"></el-option>
                     </el-select>
                     <div class="filter-tree-action">
                         <i-button title="添加条件" @click="onAddItem(data)"><i class="fa fa-plus" aria-hidden="true"></i> 添加条件</i-button>
                         <i-button title="添加组" @click="onAddGroup(data)"><i class="fa fa-plus" aria-hidden="true"></i> 添加组</i-button>
+                        <i-button v-if="!data.isroot" @click="onRemoveItem(node, data)" title="删除"><i class="fa fa-trash-o" aria-hidden="true"></i></i-button>
                     </div>
                 </div>
             </template>
@@ -47,24 +48,44 @@ import FilterMode from './filter-mode.vue';
 })
 export default class FilterTree extends Vue {
 
+    /**
+     * 数据集
+     *
+     * @type {*}
+     * @memberof FilterTree
+     */
     @Prop() datas: any;
 
+    /**
+     * 过滤项集合
+     *
+     * @type {*}
+     * @memberof FilterTree
+     */
     @Prop() fields: any;
 
-    protected defaultProps: any = {
-        children: 'items',
-        label: 'name'
-    };
-
+    /**
+     * 组条件集合
+     *
+     * @type {*}
+     * @memberof FilterTree
+     */
     protected relationModes: any[] = [
         { zh: '并且', en: 'AND', value: '$and' },
         { zh: '或', en: 'OR', value: '$or' }
     ];
 
+    /**
+     * 树数据集合
+     *
+     * @type {*}
+     * @memberof FilterTree
+     */
     get treeItems() {
         let root: any = {
-            name: '$and',
-            items: this.datas
+            label: '$and',
+            isroot: true,
+            children: this.datas
         };
         if(this.datas.length == 0) {
             this.onAddItem(root);
@@ -73,35 +94,59 @@ export default class FilterTree extends Vue {
         return [root];
     }
 
+    /**
+     * 属性变化
+     *
+     * @return {*}
+     * @memberof FilterTree
+     */
     public onFieldChange(data: any) {
         if(!data.mode) {
             data.mode = '$eq';
         }
     }
 
+    /**
+     * 添加条件
+     *
+     * @return {*}
+     * @memberof FilterTree
+     */
     public onAddItem(data: any) {
-        if(data && data.items) {
-            data.items.push({
+        if(data && data.children) {
+            data.children.push({
                 field: null,
                 mode: null
             });
         }
     }
 
+    /**
+     * 添加组
+     *
+     * @return {*}
+     * @memberof FilterTree
+     */
     public onAddGroup(data: any) {
-        if(data && data.items) {
-            data.items.push({
-                name: '$and',
-                items: []
+        if(data && data.children) {
+            data.children.push({
+                label: '$and',
+                children: []
             })
         }
     }
 
+    /**
+     * 删除条件/组
+     *
+     * @return {*}
+     * @memberof FilterTree
+     */
     public onRemoveItem(node: any, data: any) {
         if(node && node.parent) {
             let pData: any = node.parent.data;
-            if(pData.items.indexOf(data) >= 0) {
-                pData.items.splice(pData.items.indexOf(data), 1)
+            if(pData.children.indexOf(data) >= 0) {
+                pData.children.splice(pData.children.indexOf(data), 1)
             }
         }
     }