button按钮
button API
ButtonGroup API
Radio单选框
单选框格式 <el-radio>
<template><el-radio v-model="radio" label="1">选项</el-radio><el-radio v-model="radio" label="2">选项</el-radio></template><script>export default {data(){//默认选中的按钮return{radio:'1'}}}</script>
单选框组格式: <el-radio-group>
<template><el-radio-group v-model="radio"><el-radio label="1">选项</el-radio><el-radio label="2">选项</el-radio></el-radio-group></template><script>export default {data(){return{radio:'1'}}}</script>
单选按钮格式<el-radio-button>
<template><el-radio-group v-model="radio"><el-radio-button label="1">选项</el-radio-button><el-radio-button label="2">选项</el-radio-button></el-radio-group></template><script>export default {data(){return{radio:'1'}}}</script>
Radio Attributes
Radio Event
Radio-group Attributes
Radio-group Events
Checkbox多选框
格式:<el-checkbox>
<template><el-checkbox v-model="checked">选项</el-checkbox></template><script>export default{data(){return{checked:true}}}</script>
多选框组<el-checkbox-group>
<template><el-checkbox-group v-model="checkList"><el-checkbox label="A"></el-checkbox><el-checkbox label="B"></el-checkbox><el-checkbox label="C"></el-checkbox></el-checkbox-group></template><script>export default {data(){//多选return{checkList:["A","C"]}}}</scrpit>
多选按钮<el-checkbox-button>
<template><el-checkbox-group v-model="checkList"><el-checkbox-button label="A"></el-checkbox-button><el-checkbox-button label="B"></el-checkbox-button><el-checkbox-button label="C"></el-checkbox-button></el-checkbox-group></template><script>export default {data(){//多选return{checkList:["A","C"]}}}</script>
与单选框Radio不同的Attributes
获取选中的checkbox的label值
<template><el-checkbox-group v-model="checkedList"><el-checkbox label="1">A</el-checkbox><el-checkbox label="2">B</el-checkbox></el-checkbox-group><div>你选择{{checkedList}}</div></template><script>export default{data(){return{checkedList:[]}}}</script>