diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 84c3526cd5..2c6c56c610 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -2,6 +2,15 @@
   <div @click="handleClick">
     <component
       :is="config.component"
+      v-if="config.type==='custom'"
+      :id="'component' + config.id"
+      class="component"
+      :style="getStyle(config.style)"
+      :element="config"
+    />
+    <component
+      :is="config.component"
+      v-else
       class="component"
       :style="getStyle(config.style)"
       :prop-value="config.propValue"
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index bbdea8ec26..213e9bf73d 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
+  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" clearable :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -52,6 +52,7 @@ export default {
   },
   methods: {
     changeValue(value) {
+      this.inDraw && this.$store.dispatch('conditions/add', { component: this.element, value: [this.options.value], operator: this.operator })
       this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
     }
   }
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index b12c9dcaa7..e66423005a 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -24,6 +24,7 @@ const getters = {
   drawWidgetMap: state => state.application.drawWidgetMap,
   validate: state => state.lic.validate,
   licMsg: state => state.lic.licMsg,
-  uiInfo: state => state.user.uiInfo
+  uiInfo: state => state.user.uiInfo,
+  conditions: state => state.conditions.conditions
 }
 export default getters
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 0ee2634c16..c85871d612 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -11,6 +11,7 @@ import request from './modules/request'
 import panel from './modules/panel'
 import application from './modules/application'
 import lic from './modules/lic'
+import conditions from './modules/conditions'
 import animation from '@/components/canvas/store/animation'
 import compose from '@/components/canvas/store/compose'
 import contextmenu from '@/components/canvas/store/contextmenu'
@@ -135,7 +136,8 @@ const data = {
     request,
     panel,
     application,
-    lic
+    lic,
+    conditions
   },
   getters
 }
diff --git a/frontend/src/store/modules/conditions.js b/frontend/src/store/modules/conditions.js
new file mode 100644
index 0000000000..965b239c8f
--- /dev/null
+++ b/frontend/src/store/modules/conditions.js
@@ -0,0 +1,77 @@
+import { Condition } from '@/components/widget/bean/Condition'
+const state = {
+  conditions: []
+}
+
+const mutations = {
+  ADD_CONDITION: (state, condition) => {
+    !condition && (condition = [])
+    state.conditions.push(condition)
+  },
+  REDUCE_CONDITION: (state, index) => {
+    state.conditions && state.conditions.length > index && state.conditions.splice(index, 1)
+  }
+}
+
+const actions = {
+  add({ commit }, data) {
+    const condition = formatCondition(data)
+    if (!state.conditions || state.conditions.length === 0) {
+      state.conditions = []
+    }
+    const validResult = isValid(condition)
+    if (!validResult.statu && validResult.hasOwnProperty('existIndex') && validResult.existIndex !== -1) {
+      commit('REDUCE_CONDITION', validResult.existIndex)
+      commit('ADD_CONDITION', condition)
+    }
+    if (validResult.statu) {
+      commit('ADD_CONDITION', condition)
+    }
+  },
+  reduce({ commit }, index) {
+    commit('ADD_CONDITION', index)
+  }
+
+}
+// 判断条件condition是否有效
+const isValid = condition => {
+  const nullResult = {
+    statu: false,
+    msg: 'condition is null'
+  }
+  const repeatResult = {
+    statu: false,
+    existIndex: -1,
+    msg: 'condition is exist'
+  }
+  const validResult = {
+    statu: true,
+    msg: null
+  }
+  if (!condition) {
+    return nullResult
+  }
+  for (let index = 0; index < state.conditions.length; index++) {
+    const item = state.conditions[index]
+    if (item.componentId === condition.componentId) {
+      repeatResult.existIndex = index
+      return repeatResult
+    }
+  }
+  return validResult
+}
+
+const formatCondition = obj => {
+  const { component, value, operator } = obj
+  const fieldId = component.options.attrs.fieldId
+  const viewIds = component.options.attrs.viewIds
+  const condition = new Condition(component.id, fieldId, operator, value, viewIds)
+  return condition
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}