1.问题分析
在vue之前,我们想要获取某一组(设置相同的name属性)radio的选中状态是通过name属性获取,判断input的checked是true还是false,但是当列表中有多组(动态获取)就显得很乏力;vue出现后我们可以通过v-model很巧妙的完成。
2.vue中分析(完成代码请看后面)
<input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
我们将name绑定COLUMN_CODE设置为同一组radio或checkbox;v-model绑定返回的值ISSELECT(true/false),value=‘true’表示当ISSELECT的值为true是该radio或checkbox就自动选中,同理,当我们选中某一项时对应的ISSELECT自动切换成true。
vue官网描述的是无需设置name,但是我在项目中测试过是通不过的,因为还是无法识别是同一组还是不同组,所以建议读者 加上。
3.完成代码(该例子中input是自定义的样式)
1)json数据
{ "THEME_STATUE": "1", "back_type": null, "THEME_CODE": "1495077293228", "THEME_NAME": "新款工作服样式调查问卷", "POLL_TYPE_DESC": "投票问卷(选择答题)", "POLL_TYPE": "B", "THEME_CONTENT": "关于新款工作服样式评价的投票通知各位职工朋友:今年,公司工作服已到新一轮采购周期。为提高职工对工作服的满意度,展示职工良好形象,安全管理部与工会一同对职工的意见反馈进行了收集,并组织职工代表对新款样衣进行了初评。现请广大职工朋友根据图样展示,评选心目中最佳的春、夏和冬装棉服款式。我们将根据大家投票结果定款。安全管理部、工会2017年5月15日", "ANSWER_MODE": "", "POLL_MULT_NUM": "", "POLL_SINGLE_NUM": "", "MAX_POLL_NUM": "", "POLL_SINGLE_SCORE": 0, "POLL_MULT_SCORE": 0, "BGIMG": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a3d249fa8e3d72b9", "SCORE_STATUS": "", "SCORE_RESULT": "", "CREATE_DATE": "2017-05-31", "END_DATE": "2019-10-30", "ISANSWER": false, "COLUMN_LIST": [{ "COLUMN_CODE": "181", "COLUMN_NAME": "1、您所在的工作单位", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "191", "OPTION_NAME": "A、厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "192", "OPTION_NAME": "B、烟厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "193", "OPTION_NAME": "C、湖北 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "194", "OPTION_NAME": "D、中国 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "195", "OPTION_NAME": "E、大大 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "196", "OPTION_NAME": "F、小小", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "197", "OPTION_NAME": "G、卷烟材料厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "198", "OPTION_NAME": "H、新业薄片公司 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "142", "COLUMN_NAME": "2、您所在的工作区域", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "61", "OPTION_NAME": "A、卷包车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "62", "OPTION_NAME": "B、制丝车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "63", "OPTION_NAME": "C、动力车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "64", "OPTION_NAME": "D、仓储、物流 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "65", "OPTION_NAME": "E、其他 ", "OPTION_HREF": "", "OPTION_TYPE": "text", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "143", "COLUMN_NAME": "3、您所在的工作岗位", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "66", "OPTION_NAME": "A、操作工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "67", "OPTION_NAME": "B、维修工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "68", "OPTION_NAME": "C、辅助工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "69", "OPTION_NAME": "D、管理人员 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "70", "OPTION_NAME": "E、其他 ", "OPTION_HREF": "", "OPTION_TYPE": "text", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "144", "COLUMN_NAME": "4、您心目中最佳的春、夏款式是", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "71", "OPTION_NAME": "A、春、夏款款式一 ", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8f4e214b53e4cfce", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "190", "OPTION_NAME": "B、春、夏款款式二", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=927308324fa1f0fa", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "72", "OPTION_NAME": "C、春、夏款款式三", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=be74770291a746f3", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "73", "OPTION_NAME": "D、春、夏款款式四", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8828122cb5818a04", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "74", "OPTION_NAME": "E、春、夏款款式五", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a746a3bbb7d55e3b", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "75", "OPTION_NAME": "F、现发放款式", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "145", "COLUMN_NAME": "5、您心目中最佳的冬装棉服款式是", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "76", "OPTION_NAME": "A、冬装棉服款式一 ", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=b39968d6d0b7446e", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "77", "OPTION_NAME": "B、冬装棉服款式二", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a55d3e9b0a49ae8d", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "146", "COLUMN_NAME": "6、在您选中的款式中,需要改进的细节 ", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "78", "OPTION_NAME": "A、工牌悬挂配饰", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "79", "OPTION_NAME": "B、裤装口袋", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "80", "OPTION_NAME": "C、夹克口袋 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "81", "OPTION_NAME": "D、衣扣 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "147", "COLUMN_NAME": "7、您对选中样衣的其他建议", "COLUMN_TYPE": "text", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [] }], "success": "1" }
2)html代码
<div class="select-item" v-if="voteType == 'A' || voteType == 'B'" :key="index" v-for="(item, index) in detailList"> <div class="family select-item-title" :attr="item.COLUMN_CODE" v-if="item.COLUMN_TYPE == 'radio'" v-html="item.COLUMN_NAME + '(单选)'"></div> <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else-if="item.COLUMN_TYPE == 'checkbox'" v-html="item.COLUMN_NAME + '(多选)'"></div> <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else v-html="item.COLUMN_NAME"></div> <div class="option-con" v-if="item.COLUMN_TYPE != 'text'" :key="index1" v-for="(item1, index1) in item.OPTION_LIST"> <div class="option-con-row" v-if="item1.OPTION_TYPE != 'text'"> <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox"> <div class="family option-desc">{{item1.OPTION_NAME}}</div> </div> <div class="text-area-con" v-else> <div class="option-con-row"> <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox"> <div class="family option-desc">{{item1.OPTION_NAME}}</div> </div> <textarea class="text-area" rows="3" v-model="item1.OPTION_CONTENT" :readonly="isAnswer"></textarea> </div> <img class="option-con-img" v-if="item1.EMC_URL" :src="https://www.atool.online/article/item1.EMC_URL"> </div> <div class="option-con" v-if="item.COLUMN_TYPE == 'text'"> <div class="text-area-con"> <textarea class="text-area" rows="3" v-model="item.COLUMN_CONTENT" :readonly="isAnswer"></textarea> </div> </div> </div>
3)css样式
/*radio或checked的样式:*/ .checkbox-list-con .mint-msgbox-message{ line-height: 20px; } .checkbox-list-con span { position: relative; margin-right: 15px; } .checkbox-list-con .Checkbox { position: absolute; visibility: hidden; } .checkbox-list-con .Checkbox+label { position:absolute; width: 16px; height: 16px; border: 1px solid #A6A6A6; border-radius: 50%; background-color:#ffffff; } .checkbox-list-con .Checkbox:checked+label:after { content: ""; position: absolute; left: 2px; top:2px; width: 9px; height: 4px; border: 2px solid #00b7ee; border-top-color: transparent; border-right-color: transparent; transform: rotate(-45deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .checkbox-list{ display: flex; flex-direction: row; margin-bottom: 5px; align-items: center; line-height: 20px; } .checkbox-list-con{ display: flex; flex-direction: column; padding: 10px 20px; } /*自定义checkbox*/ .tui-checkbox:checked { background:#1673ff } .tui-checkbox { width:25px; height:25px; background-color:#ffffff; border:solid 1px #dddddd; -webkit-border-radius:50%; border-radius:50%; font-size:0.8rem; margin:0; padding:0; position:relative; display:inline-block; vertical-align:top; cursor:default; -webkit-appearance:none; -webkit-user-select:none; user-select:none; -webkit-transition:background-color ease 0.1s; transition:background-color ease 0.1s; } .tui-checkbox:checked::after { content:''; top:5px; left:5px; position:absolute; background:transparent; border:#fff solid 2px; border-top:none; border-right:none; height:6px; width:10px; -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } /*其他样式*/ .score-result{ font-size: 16px; font-weight: 600!important; color: #2E8B57; width: calc(100% - 40px); padding: 10px 20px; line-height: 20px; background: #ffffff; } .text-area-con{ width: 100%; } .text-area{ width: calc(100% - 10px); /*height: 80px;*/ padding: 5px; outline: none; resize: none; font-size: 15px; font-weight: 500; color: #333333; font-family: "Microsoft YaHei"; border: 1px solid #888888; } .appointment-btn { position: relative!important; font-size: 18px; color: #ffffff; text-align: center; line-height: 44px; height: 44px; border-top: 1px solid #f2f2f2; background: #366CB3; width: calc(100% - 32px); margin: 0px 0px 15px 16px; border-radius: 3px; letter-spacing: 4px; } .option-desc{ font-size: 15px; margin-left: 20px; width: calc(100% - 45px); text-align: justify; line-height: 24px; } .option-desc1{ font-size: 15px; margin-left: 20px; width: calc(100% - 45px); text-align: justify; line-height: 24px; color: #F0686E; } .option-con-img{ width: calc(100% - 90px); height: 140px; margin-left: 45px; } .option-con-row{ display: flex; align-items: center; width: 100%; padding: 10px 0px; } .option-con{ display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - 40px); padding: 10px 20px; border-top: 1px solid #efefef; } .select-item-title{ width: calc(100% - 40px); padding: 10px 20px; color: #4682B4; text-align: justify; font-size: 15px; line-height: 24px; } .select-item{ display: flex; flex-direction: column; margin-bottom: 15px; background: #ffffff; } .bottom-con{ display: flex; flex-direction: column; width: 100%; background: #f2f2f2; } .top-four-img{ width: 16px; height: 16px; } .top-four-title{ color: #434343; font-size: 16px; margin-right: 5px; } .top-four{ display: flex; justify-content: center; align-items: center; background: #ffffff; width: 100%; padding: 15px 0px; } .top-three-content{ color: #333333; font-size: 15px; line-height: 28px; text-indent:2em; text-align: justify; } .top-three-desc{ color: #4682B4; font-size: 15px; line-height: 28px; text-indent:2em; } .top-three{ width: calc(100% - 40px); padding: 15px 20px 0px 20px; background: #ffffff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .top-three1{ width: calc(100% - 40px); padding: 15px 20px 15px 20px; background: #ffffff; } .top-two-time{ width: 100%; text-align: center; font-size: 13px; color: #999999; margin-bottom: 10px; } .top-two-title{ font-size: 18px; color: #4682B4; text-align: center; width: 100%; margin-bottom: 10px; line-height: 24px; } .top-one>img{ height: 100%; width: 100%; } .top-two{ width: calc(100% - 40px); background: #ffffff; padding:0px 20px; border-bottom: 1px solid #efefef; } .top-one{ height: 100px; width: 100%; } .top-con{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-bottom: 15px; } .wrapper { width: 100%; height: 100%; /*height: calc(100% - 70px);*/ overflow: auto; background: #f2f2f2; -webkit-overflow-scrolling: touch; } .container { height: 100%; background-color: #f2f2f2; display: flex; flex-direction: column; }
4.效果图
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。