实现取色器表格预览

前言

最近在做一个颜色配色的页面，需要用户配取的颜色直接显示到表格对应行里直接显示，这样用户就可以很直白的看到自己选取颜色变化，就不用切换页面才能看。
实现思路： 由于项目中用到的是elementui框架，所以我们这里直接取用标签,这里还可以选用vue的插件
vColorPickerhttp://vue-color-picker.rxshc.com/

但是这个插件有一个坑，会影响到我的页面布局，故弃用了，因为它的显示是visibility: hidden;,就是说在页面上看不到，但是还是会占用到该高度。
考虑到表格行的渲染，我们先看一下官方文档上的描述：

这里我们用到的是row-style属性
先看实现效果是不是你需要的

上代码讲解：

<template>
  <div id="colorScheme" class="color-scheme" v-loading="colorConfig" element-loading-text="配色方案加载中">
    <!-- 上方按钮 -->
    <div class="color-scheme__header">
      <el-button plain type="primary" icon="iconfont icon-shuaxin1" @click="listColorConfigure">刷新</el-button>
      <el-button plain type="primary" icon="iconfont icon-chucun" @click="handleSave">保存</el-button>
    </div>

    <div class="color-scheme__content">
      <div class="color-scheme__left">
        <!-- 循环遍历后台返回的数据渲染在页面上 -->
        <div class="color-scheme__item" v-for="item in colorArr" :key="item.key">
          <div class="span-color">{{ item.key + '的颜色' }}</div>
          <el-input v-model="item.value"></el-input>
          <el-color-picker v-model="item.value" show-alpha></el-color-picker>
        </div>
      </div>
      <div class="color-scheme__right">
        <p>颜色预览</p>
        <!-- 右边表格 row-style-->
        <el-table 
          ref="tableRef"
          :data="tableData"
          :max-height="maxHeight"
          border
          :row-style="handleColor"
          show-checkbox>
          <el-table-column type="selection"></el-table-column> 
          <el-table-column
            v-for="item in tableColData"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :sortable="item.sortable"
            :width="item.width"
            :align="item.align">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div> 
</template>

<script>
import { notification } from '@/utils/global'
import environmentApi from '@/api/system/environment'

export default {
  name: 'ColorScheme',
  data () {
    return {
      colors: '',
      colorConfig: false,
      colorArr: [],
      maxHeight: null,
      tableData: [],
      tableColData: [
        {prop: 'catalog', label: '分类', sortable: false, align: 'center', width: 180},
        {prop: 'key', label: '主键', sortable: false, align: 'center', width: 360},
        {prop: 'value', label: '颜色值', sortable: false, align: 'center', width: 280},
        {prop: 'sortValue', label: '排序', sortable: true, align: 'center', width: 140}
      ]
    }
  },
  mounted () {
    this.listColorConfigure()
  },
  methods: {
    // 处理对应行颜色
    handleColor (row, rowIndex) {
      let _color = 'background-color: ' + row.row.value + ';'
      return _color
    },
    listColorConfigure () {
      this.colorConfig = true
      environmentApi.listColorConfigure().then(res => {
        if (res.status === 0) {
          this.colorArr = res.data
          this.tableData = res.data
          this.colorConfig = false     
        } else {
          notification({
            type: 'warning',
            title: res.message || '获取颜色配置有误'
          })          
        }
      }).catch(err => {
        this.colorConfig = false 
        notification({
          type: 'error',
          title: err.message || '获取颜色配置有误'
        })       
      })
    },
    handleSave () {
    // 这里也遇到一个很难搞的问题就是中文键值的问题 ，最后发现可以用下面这种方法解决
      let obj = {}
      this.colorArr.map(item => {
        obj[item.key] = item.value
      })
      environmentApi.saveColorConfigure(obj).then(res => {
        if (res.status === 0) {
          this.listColorConfigure()
          notification({
            type: 'success',
            title: '保存颜色配置成功'
          })         
        } else {
          notification({
            type: 'warning',
            title: res.message || '保存颜色配置有误'
          })          
        }
      }).catch(err => {
        notification({
          type: 'error',
          title: err.message || '保存颜色配置有误'
        })       
      })
    }
  }
}
</script>

<style lang="scss">
@include b(color-scheme) {
  flex: 1;
  display: flex;
  flex-direction: column;
  @include e(header) {
    border: 1px solid #e4e7ed;
    background-color: #f9f9f9;
    padding: 5px 10px;
  }
  @include e(content) {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding-top: 5px;
    overflow: auto;
  }
  @include e(left) {
    width: 500px;
    margin-top: 70px;
  }
  @include e(item) {
    display: flex;
    flex-direction: row;
    padding: 6px;
    .span-color {
      padding: 5px;
      width: 150px;
      text-align: right;
    }
    .el-input {
      width: 210px;
      margin-right: 10px;
    }
  }
}
</style>

附图： 保存颜色接口的表单封装格式

后台返回数据格式