基于element-ui组件手动实现单选和上传功能-创新互联

前言

创新互联公司是一家集网站建设,洮南企业网站建设,洮南品牌网站建设,网站定制,洮南网站建设报价,网络营销,网络优化,洮南网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

在用户使用过程中提出一键导入的功能，需求如下:点击导入按钮显示提示框，然后是单选框以及上传按钮。pc端常使用element-ui组件，但是这个项目是vue1的老项目，并且没有element-ui组件。所以需要自己动手实现单选功能和上传功能。

radio 属性及方法

name： 用于定义同一类型的 radio 同一 name 的 radio 只能选中一个(单选实现)

• id： 用于和 label 标签关联起来 实现点击 label 标签内的元素也能选中 radio
• value：单选按钮的值，选中某个单选按钮相当于拿到 value 值 tip：用于识别组中的哪个单选按钮被选中。
• checked 用于设置默认选中的 radio
• v-model 创建双向数据绑定。 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

// html
 

 
 {{day.label}}({{day.value}})
 
// 暂定的数据
data(){
 return {
 weekSelectList: [
  { label: '周一', value: '2018-12', id: 1 },
  { label: '周二', value: '2018-13', id: 2 },
  { label: '周三', value: '2018-14', id: 3 },
  { label: '周四', value: '2018-15', id: 4 },
  { label: '周五', value: '2018-16', id: 5 }
 ]
 },
 selectedDay: '2018-12',
}

名称栏目：基于element-ui组件手动实现单选和上传功能-创新互联
分享路径：http://shouzuofang.com/article/dcpsde.html