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>