easydo-mes-web/src/components/scTable/renderer/form-radio.vue

<template>
    <el-radio-group v-model="modelValue" v-bind="renderOpts.props" @change="compChange">
        <el-radio v-for="(item, index) in renderOpts.options" :key="index" :label="formatOptions('label', { item, index })" :value="formatOptions('value',  { item, index })"></el-radio>
    </el-radio-group>
</template>

<script setup>
import XEUtils from "xe-utils";
import config from "@/config/select";

const props = defineProps({
    renderOpts: { type: Object, default: () => ({}) },
    params: { type: Object, default: () => ({}) }
})

const modelValue = ref(null);
watch(() => props.params, val => modelValue.value = XEUtils.get(val.data, val.field), { deep: true, immediate: true });

const optionProps = reactive(props.renderOpts.optionProps || config.props);
const formatOptions = (key, { item, index }) => {
    if (XEUtils.isFunction(optionProps[key])) return optionProps[key]({ data: item, index });
    return XEUtils.get(item, optionProps[key]);
}

const compChange = () => props.renderOpts.events.change({ [props.params.field]: modelValue.value });
</script>

<style scoped>
@media (max-width: 1120px) {
    .el-radio-group {flex-wrap: nowrap;} 
    .el-radio {margin-right: 10px;}
}
</style>