layuiTable表格里的select下拉框设置默认选中的值

表格里面嵌套下拉框无法显示默认值

最近在做一款后台管理系统的时候，表格里面需要嵌套select下拉，在请求后台拿到对表格进行数据填充的时候发现select无法展示默认的数据，看到网上的好多办法，虽然也都能实现默认效果，但是不是我想要的方法，于是又再返回官网看文档，原来option有一个属性是selected，加上这个属性后，select就会默认显示你要展示的值。下面贴上代码：

代码展示

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var cols = [[{
							type: 'checkbox',
							align:'center',
							width:60,
						},{
							field: 'deviceID',
							title: '电梯编号',
							width:200,
							align:'center',
						},{
							field: 'productionID',
							title: '生产编号',
							width:200,
							align:'center',
						},{
							field: 'location',
							title: '位置',
							width:350,
							align:'center'
						},{
							field: 'taskNature',
							title: '作业性质',
							width:170,
							align:'center',
							event: 'setTaskNature', 
							templet: function (d) {
								 var selectHTML = '<select name="taskNature" lay-filter="stateWork" id="taskNature" lay-verify="required" value="' + d.taskNature + '" data-value="' + d.taskNature + '" >' +
        										  '<option value="" selected>请选择作业性质</option>';
        								   if(d.taskNature === "1"){
               							  		selectHTML = selectHTML + '<option value="1" selected>月度</option>';
               							  	}else{
               							  		selectHTML = selectHTML + '<option value="1">月度</option>';
               							  	}
        								   
        								   if(d.taskNature === "2"){
               							  		selectHTML = selectHTML + '<option value="2" selected>季度</option>';
               							  	}else{
               							  		selectHTML = selectHTML + '<option value="2">季度</option>';
               							  	}
        								   
                   						   if(d.taskNature === "3"){
                   							   selectHTML = selectHTML + '<option value="3" selected>半年度</option>';
                   						   }else{
               							  		selectHTML = selectHTML + '<option value="3">半年度</option>';
               							   }
                                           
                                           if(d.taskNature === "4"){
                   							   selectHTML = selectHTML + '<option value="4" selected>年度</option>';
                   						   }else{
               							  		selectHTML = selectHTML + '<option value="4">年度</option>';
               							   }
                                           
                              selectHTML = selectHTML + '</select></div>';
                              return selectHTML
        					}
						},{
							field:'planEndTime',
							title:'计划作业结束时间',
							width:200,
							align:'center',
							event:'setplanEndTime',
							templet:"#endWork"
						},{
							field:'remark',
							title:'备注',
							width:300,
							align:'center',
							event:'setRemark',
							templet:note
						}]];

这样就是可以成功展示默认值了，实现效果：
![实现效果](https://img-blog.csdnimg.cn/20200908141046195.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd6aGVuXw==,size_16,color_FFFFFF,t_70#pic_center)