xm-select/docs/mds/ZP01.md

下拉自定义

下拉表格

至于能干什么, 就看你们的想象了~~

:::demo

<div id="demo1"></div>

<script>
//先渲染多选
var demo1 = xmSelect.render({
	el: '#demo1', 
	prop: {
		name: 'username',
		value: 'username',
	},
	content: `
		<table class="layui-table" lay-filter="demo">
		  <thead>
			<tr>
			  <th lay-data="{field:'username', width:80}">昵称</th>
			  <th lay-data="{field:'experience', width:50, sort:true}">积分</th>
			  <th lay-data="{field:'sign', width: 200}">签名</th>
			</tr> 
		  </thead>
		  <tbody>
			<tr>
			  <td>贤心1</td>
			  <td>66</td>
			  <td>人生就像是一场修行a</td>
			</tr>
			<tr>
			  <td>贤心2</td>
			  <td>88</td>
			  <td>人生就像是一场修行b</td>
			</tr>
			<tr>
			  <td>贤心3</td>
			  <td>33</td>
			  <td>人生就像是一场修行c</td>
			</tr>
		  </tbody>
		</table>
	`,
	height: 'auto',
})

layui.table.init('demo', {
	done: function(res){
		demo1.update({ data: res.data })
	}
}).on('row(demo)', function(obj){
	var values = demo1.getValue();
	var item = obj.data;
	var has = values.find(function(i){
		return i.username === item.username
	})
	if(has){
		demo1.delete([ item ]);
	}else{
		demo1.append([ item ]);
	}
	
})
</script>

:::