参考原型
实现效果（基本效果，后期根据自己需求优化，目前版本不足为选中框内容不是颜色）
渐变颜色，分多少段，初始值结束值等都可配置（方法中相应位置很明显，模板中配置的地方就不展示了）
基础代码
首先下载一下chroma-js
1.template
<div class="item_title" style="padding-top: 12px">
<span style="padding-left:10px;padding-right: 10px">颜色设置：</span>
<a-select v-model="selectedScheme" placeholder="选择渐变色" option-label-prop="label" style="width:200px">
<a-select-option
v-for="scheme in colorOptions"
:key="scheme.name"
:value="scheme.name"
:label="scheme.name"
>
<div class="color-option">
<!-- <span class="scheme-name">{{ scheme.colors }}</span> -->
<div class="color-gradient">
<div
v-for="(color, index) in scheme.colors"
:key="index"
class="color-segment"
:style="{ backgroundColor: color }"
></div>
</div>
</div>
</a-select-option>
</a-select>
</div>
<a-table
:columns="columns"
:data-source="colorSegments"
:pagination="false"
>
<span slot="colorDisplay" slot-scope="text,record" class="color-display">
<div
class="color-block"
:style="{ backgroundColor: record.color }"
></div>
{{ record.rgb}}
</span>
<!-- <template #colorDisplay="{ record }">
<div class="color-display">
<div
class="color-block"
:style="{ backgroundColor: record.color }"
></div>
<span class="rgb-text">{{ record.rgb }}</span>
</div>
</template> -->
</a-table>
2.script
import chroma from 'chroma-js';
data() {
return {
columns: [
{
title: '序号',
dataIndex: 'sequence',
align: 'center',
width: '15%'
},
{
title: '数值',
dataIndex: 'value',
align: 'center',
width: '35%'
},
{
title: '颜色',
scopedSlots: { customRender: 'colorDisplay' },
align: 'center',
width: '50%'
}
],
valuedd:1,
selectedScheme: null,
colorSchemes: [
{ name: '蓝到红', start: '#3B7BFF', end: '#FF3B3B' },
{ name: '绿到黄', start: '#00FF00', end: '#FFFF00' },
{ name: '热力图', start: '#2A81FF', end: '#FF0000' },
],}}
computed: {
colorOptions() {
return this.colorSchemes.map((scheme) => ({
name: scheme.name,
colors: chroma.scale([scheme.start, scheme.end]).mode('lab').colors(10),
}));
},
// 生成表格数据
colorSegments() {
if (!this.selectedScheme) return [];
const scheme = this.colorOptions.find(s => s.name === this.selectedScheme);
const segments = [];
const min = 400;
const step = 30;
scheme.colors.forEach((color, index) => {
segments.push({
key: index,
sequence: index + 1,
value: min + (index * step),
color: color,
rgb: chroma(color).rgb().join(', ') // 转换为 "R, G, B" 格式
});
});
return segments;
}
},
3.style
部分样式，根据自己需求填写内容
/deep/ .ant-table .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
background: transparent !important;
}
/deep/ .ant-table-bordered .ant-table-thead > tr > th{
border: none !important;
}
/deep/ td,th{
border: none !important;
}
/deep/ .ant-table .ant-table-tbody tr:nth-child(odd) {
background: transparent !important;
}
/* 颜色显示组合样式 */
.color-display {
display: flex;
align-items: center;
gap: 12px;
/* padding: 8px 0; */
}
.color-block {
width: 60px;
height: 24px;
border-radius: 4px;
/* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}
.rgb-text {
font-family: monospace; /* 等宽字体更美观 */
color: #666;
}
/* 表格颜色块样式 */
/* 调整表格行高 */
.ant-table-row {
height: 50px;
}
/* 下拉框选项高度调整 */
.ant-select-item {
padding: 0 !important;
}
.ant-select-item-option-content {
padding: 8px;
}
/* 11 */
.color-option {
padding: 8px;
}
.scheme-name {
display: block;
margin-bottom: 4px;
}
.color-gradient {
display: flex;
height: 20px;
border-radius: 4px;
overflow: hidden;
}
.color-segment {
flex: 1;
}
/* 调整下拉框选项高度 */
.ant-select-item {
padding: 0 !important;
}
.ant-select-item-option-content {
padding: 8px;
}
.color-palette {
display: flex;
flex-wrap: wrap;
}
.color-item {
width: 50px;
height: 50px;
margin: 5px;
}
/deep/ .ant-checkbox-wrapper {
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(255,255,255);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: 'tnum';
display: inline-block;
line-height: unset;
cursor: pointer;
}
/deep/ .ant-checkbox-group {
display: flex;
flex-direction: column; /* 竖向排列 */
color: white !important;
}
/deep/ .ant-checkbox {
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(255, 255, 255) !important;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: 'tnum';
position: relative;
top: -0.09em;
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
outline: none;
cursor: pointer;
}
/* 当复选框被选中时的颜色
.custom-checkbox-group .ant-checkbox-checked .ant-checkbox-inner {
background-color: white;
border-color: white;
} */
.code-mode-select{
width: 150px;
}
/deep/ .ant-select-arrow .ant-select-arrow-icon {
display: block;
color:#6bcffc
}
