2019-02-25 VUE select标签实现颜色选择

    <div class="el-form-item required" v-bind:class="{'is-error':errors.has('color1')}">
      <label class="el-form-item__label" style="width:120px;">
        颜色
      </label>
      <div class="el-form-item__content" style="margin-left:120px;max-width:300px;">
        <div class="el-input">
          <el-select
            v-model="formData.color1" placeholder="请选择" name="color1">
            <el-option v-for="(item, index) in categoryColor" :key="index"
            label=""
            :value="item.color"
            :style="{'background': item.color, 'color': item.color}"
            ></el-option>
          </el-select>
          <div class="color1" :style="{background: formData.color1}"></div>
        </div>
        <div class="el-form-item__error" v-show="errors.has('color1')">
          {{ errors.first('color1') }}
        </div>
      </div>
    </div>

  categoryColor: env.categoryColor,
  formData: {
    color1: ''
  }

.color1 {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}