element-ui中el-color-picker组件样式改为文本形式显示

要将element-ui中的el-color-picker组件样式改为文本形式显示，需要进行如下步骤：

在el-color-picker组件里添加一个input框，用于显示选中的颜色值。
给el-color-picker组件绑定事件，在颜色变化时更新input框的值。
隐藏el-color-picker组件的颜色面板，只显示一个颜色选择按钮。

下面是具体实现代码：

<template>
  <div>
    <el-color-picker
      v-model="color"
      @change="updateColor"
      :color-format="'rgb'"
      :show-alpha="false"
      :hue-slider="false"
      :color-rgba="color"
    >
      <div slot="trigger">
        <input v-model="colorText" readonly />
      </div>
    </el-color-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "#ffffff",
      colorText: "",
    };
  },
  methods: {
    updateColor() {
      this.colorText = this.color;
    },
  },
};
</script>

<style scoped>
.el-color-picker__panel {
  display: none;
}
</style>

在上面的代码中，我们添加了一个input框，并将其绑定到colorText变量上。当颜色变化时，我们在updateColor方法中更新colorText的值。

最后，我们使用CSS将el-color-picker组件的颜色面板隐藏起来，只显示一个颜色选择按钮。

这样，我们就成功地将el-color-picker组件样式改为文本形式显示了。