uniapp矩阵评分组件支持自定义图标、选择颜色、评分等级。

<template><view style="width: 100%;overflow: hidden;"><view class="flex-sub flex-table flex  flex-direction-column":style="{ '--table-border-color': tableBorderColor }"><view class="flex  items-stretch"><view class="td td0 justify-center align-center"></view><view class="td td1 justify-center align-center" v-for="(item, index) in columns">{{ item[labelName]}}</view></view><view class="flex items-stretch" v-for="(rowitem, rowindex) in rows"><view class="td td0 flex justify-center align-center">{{ rowitem[labelName] }}</view><view class="td td1 flex  justify-center align-center" @click="change(rowitem[valueName],colitem[valueName])"v-for="(colitem, colindex) in columns"><text :class="icon" :style="getStyle(rowitem[valueName],colitem[valueName],colindex)"></text></view></view></view></view></template><script>import Emitter from "../../libs/util/emitter.js";export default {mixins: [Emitter],emits: ["update:modelValue", "change"],props: {// 通过双向绑定控制组件的弹出与收起// 绑定的值value: {type: Array,default: []},// 通过双向绑定控制组件的弹出与收起// 绑定的值modelValue: {type: Array,default: []},tableBorderColor: {type: String,default: '#ebeef5',},icon: {type: String,default: 'diy-icon-starfill'},iconColor: {type: String,default: '#eee'},selectIconColor: {type: String,default: '#07c160'},initRate: {type: Number,default: 0},iconSize: {type: String,default: '24px'},disabled: {type: Boolean,default: false},// 自定义value属性名valueName: {type: String,default: 'value'},// 自定义label属性名labelName: {type: String,default: 'label'},// 行数据rows: {type: Array,default () {return [{value: '1',label: "矩阵行一"},{value: '2',label: "矩阵行二"},{value: '3',label: "矩阵行三"},];}},// 列数据columns: {type: Array,default () {return [{value: '1',label: "1"},{value: '2',label: "2"},{value: '3',label: "3"},{value: '4',label: "4"},{value: '5',label: "5"},];}},},data() {return {uForm: {inputAlign: "",clearable: ""}};},computed: {valueCom() {// #ifndef VUE3return this.value;// #endif// #ifdef VUE3return this.modelValue;// #endif}},mounted() {let parent = this.$u.$parent.call(this, 'u-form');if (parent) {Object.keys(this.uForm).map(key => {this.uForm[key] = parent[key];});}},methods: {getStyle(row, col, index) {let style = {fontSize: this.iconSize}const values = this.valueComlet rowItem = values.find(item => {return item['row'] == row})if (rowItem) {let dataColIndex = this.columns.findIndex(item => {return item[this.valueName] == rowItem['col']})if (dataColIndex >= index) {style['color'] = this.selectIconColor} else {style['color'] = this.iconColor}} else {style['color'] = this.iconColor}return style;},change(row, col) {const values = JSON.parse(JSON.stringify(this.valueCom))let index = values.findIndex(item => {return item['row'] == row})if (index >= 0) {let rowItem = values[index]if (rowItem.col == col) {values.splice(index, 1)} else {rowItem.col = col}} else {let rowItem = {row,col}values.push(rowItem);}console.log(values)this.$emit("update:modelValue", values);this.$emit("change", values);this.dispatch("u-form-item", "onFieldChange", values);}}};
</script>
<style scoped lang="scss">.flex-table {--table-border-color: #ebeef5;border-top: 1px solid var(--table-border-color);border-left: 1px solid var(--table-border-color);.td {border-bottom: 1px solid var(--table-border-color);border-right: 1px solid var(--table-border-color);text-align: center;padding: 5px;min-height: 60rpx;line-height: 60rpx;}.td0 {min-width: 80px;flex: 1}.td1 {flex: 1}}
</style>

使用代码 

<template><view class="container container23285"><u-form-item class="diygw-col-24 matrixrate-clz" label="矩阵评分" labelPosition="top" prop="matrixrate"><diy-matrixrate iconColor="#eee" :rows="matrixrateRowDatas" :columns="matrixrateColumnDatas" v-model="matrixrate"></diy-matrixrate></u-form-item><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},matrixrateRowDatas: [{ label: '矩阵行一', value: '1' },{ label: '矩阵行二', value: '2' },{ label: '矩阵行三', value: '3' }],matrixrateColumnDatas: [{ label: '1', value: '1' },{ label: '2', value: '2' },{ label: '3', value: '3' },{ label: '4', value: '4' },{ label: '5', value: '5' }],matrixrate: []};},onBackPress() {//官方限制不支持在onBackPress使用asyncconst backPress = async () => {console.log(1111);await this.dataApi();};backPress();//请根据需求返回true/false},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {}}};
</script><style lang="scss" scoped>.container23285 {padding-left: 0px;padding-right: 0px;}.container23285 {}
</style>