Element-ui之radio封装

对el-radio和el-radio-group进行二次封装，以便使用。

分两步：创建、引用。

说明 ：
1. 可选项一般是请求数据字典的值以供勾选，假设数据字典的接口为’/getDictionary’，请求参数为code，数据字典中的展示值字段为’label’，选中所传值字段为’value’。
2. 也有特定接口请求可选项的，需要指定特定的请求接口url、参数和展示的value和label值。
3. 各个属性灵活运用，也可自己添加、更改相关属性配置。
4. 这里设置从父组件中传输过来的对象和数组都用JSON串接收，目的是为了方便监听数值变化。
5. 代码为手写，已检查，但不保证没有单词写错，如报错，请检查一下单词的拼写。

一、创建公共组件vue文件 — comRadio.vue:

<template>
	<el-radio-group 
		v-model="radioValue" 
		:disabled="disabled" 
		@change="change">
		<el-radio
			v-for="item in optionLists"
			:key="optionKey ? item[optionKey.value] : item.value"
			:label="optionKey ? item[optionKey.value] : item.value"
			:disabled="item.disabled ? item.disabled : false">
			<span v-if="showLabel.length > 0" class="labelAll">
				<span v-for="itemIndex in showLabel" :key="itemIndex+''">{{ item[itemIndex] }}</span>
			</span>
			<span v-else>{{ optionKey ? item[optionKey.label] : item.label }}</span>
		</el-radio>
	</el-radio-group>
</template>
<script>
	export default {
		name: 'ComRadio',
		props: {
			value: String,
			options: String, // radio选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
			url: { // 请求选择项URL地址，默认数据字典请求接口地址，非必传。
				type: String,
				default: '/getDictionary',
			},
			urlCode: String, // 请求数据字典时的参数值，若url为数据字典请求地址，则必传，其余情况非必传。
			urlParams: String, // 接口其余请求参数的JSON串，非必传。
			disabled: { // 是否禁用，默认false，非必传。
				type: Boolean,
				default: false,
			},
			optionKeys: String, // 指定显示的vaule和label的key值JSON串，若此项有值，则不再用'value'和'label'作为属性名，以此项设置为准，默认空，非必传。
			showLabels: String, // 可选项展示值字符串，逗号隔开，若此项有值，则可选项所展示文字不再用'label'的值，以此项设置为准，展示时按照顺序展示出来。默认空，非必传。
		},
		data() {
			return {
				optionLists: [],
				optionKey: null,
				requestParams: null,
				showLabel: [],
				radioValue: this.value,
			};
		},
		watch: {
			options() {
				if(this.options)
					this.optionLists = JSON.parse(this.options)
			},
			urlCode() {
				this.getOptions();
			},
			urlParams() {
				this.requestParams = this.urlParams ? JSON.parse(this.urlParams) : null;
				this.getOptions();
			},
			url() {
				this.getOptions();
			},
			value() {
				this.selectValue = this.value
			},
			optionKeys() {
				this.optionKey = this.optionKeys ? JSON.parse(this.optionKeys) : null;
			},
			showLabels() {
				this.showLabel = this.showLabels ? this.showLabels.split(',') : [];
			},	
		},
		created() {
			this.optionKey = this.optionKeys ? JSON.parse(this.optionKeys) : null;
			this.showLabel = this.showLabels ? this.showLabels.split(',') : [];
			this.requestParams = this.urlParams ? JSON.parse(this.urlParams) : null;
			if (this.options) { // 如果父组件有可选项数据，则不进行数据请求
				this.optionLists = JSON.parse(this.options)
			} else {
				this.getOptions()
			}
		},
		methods: {
			/**
			* 获取选择项数据
			**/
			getOptions() {
				let params = {}
				if (this.urlCode)
					params.code = this.urlCode
				if(this.requestParams) {
					params = Object.assign(params, this.requestParams)
				}
				this.axios.get(this.url, {params})
				.then(res => {
					this.optionLists = res.list // 假设返回的数据封装在list中
				}).catch(() => {})
			},
			/**
			* 选择框选中时触发
			* @val {String} 当前选中值
			**/
			change(val) {
				let valueKey = 'value'
				if (this.optionKey) 
					valueKey = this.optionKey.value
				
				const valOption = this.optionLists.filter(itemO => itemO[valueKey] === val);
				const [valObj] = valOption;
				this.$emit('change', val, valObj);
			},
		},
	}
</script>
<style lang="less" scoped>
	.labelAll {
        span {
            margin-right: 10px;
            &:last-child {
                font-size: 13px;
                color: #8492a6;
            }
        }
		
	}
</style>

二、引用：

<template>
	<com-radio
		v-model="model"
		:options="options"
		:urlParams="urlParams"
		:optionKeys="optionKeys"
		:showLabels="showLabels"
		@change="radioChange"
	></com-radio>
</template>
<script>
	import comRadio from './comRadio.vue'
	export default {
		components: { comRadio },
		data() {
			return {
				model: '',
				options: JSON.stringify([
					{
						valueKey: '01',
						labelKey: '选项1',
						dis: '说明1',
						disA: '说明2',
					},
					{
						valueKey: '02',
						labelKey: '选项2',
						dis: '说明3',
						disA: '说明4',
					}
				]),
				urlParams: JSON.stringify({
					key1: '01',
					key2: 'Y',
				}),
				optionKeys: JSON.stringify({
					value: 'valueKey',
					label: 'labelKey'
				}),
				showLabels: 'labelKey,dis,disA',	
			};
		},
		methods: {
			/**
			* 选择框选择值更改触发
			* @val {String} 当前选中值
			* @valObj {Object} 当前选中值所在的对象
			**/
			radioChange(val, valObj) {
				this.model = val
				console.log("valObj=>", valObj)
				console.log("val=>", val)
			}
		},
	}
</script>

效果图：


完。