iview form表单中颜色选择器显示不全问题(iview组件和element ui组件混用)

1.现象

使用ivewd form表单并且在from中添加了多个颜色选择器,最终颜色选择器在页面上显示不全

2.对比

图1-1在iview的form中使用了iview自己的颜色组件
图1-2在iview的form中使用element ui的颜色组件

3.最终选择在iview中使用element ui的颜色组件

代码:

  <Form :model="form" :label-width="100" style="width:300px">
            <FormItem label="节点文本">
              <Input size="small" v-model="form.labelText" placeholder="节点名称"
                     @on-change="changeNode('labelText', form.labelText)"
              ></Input>
            </FormItem>
            <FormItem label="字体大小">
              <Slider :step="1" size="small" v-model="form.fontSize" show-input
                      @on-change="changeNode('fontSize', form.fontSize)"
              ></Slider>
            </FormItem>

            <FormItem label="字体颜色">
           //element ui
              <el-color-picker v-model="form.fontFill" show-alpha @change="changeNode('fontFill', form.fontFill)"></el-color-picker>
            </FormItem>
            <FormItem label="节点背景颜色">
              <Row>
                <Col span="30">
                //iview
                  <ColorPicker v-model="form.fill" alpha @on-change="changeNode('fill',form.fill)"/>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="边框颜色">
              <Row>
                <Col span="22">
                  <ColorPicker v-model="form.stroke" alpha @on-change="changeNode('stroke',form.stroke)"/>
                </Col>
              </Row>
            </FormItem>
          </Form>

…不全换成element ui 的原因 是因为我需要使用的组件element ui没有我需要的组件.两者可以混用