2019-11-19 20:13:50 +08:00
|
|
|
## 构建选项
|
|
|
|
|
|
|
|
|
|
|
|
### 默认渲染
|
|
|
|
|
|
|
|
:::demo
|
|
|
|
```html
|
|
|
|
<div id="demo1" class="xm-select-demo"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var demo1 = xmSelect.render({
|
|
|
|
el: '#demo1',
|
|
|
|
data: [
|
|
|
|
{name: '张三', value: 'zhangsan', selected: true},
|
|
|
|
{name: '李四', value: 'lisi', selected: true},
|
|
|
|
{name: '王五', value: 'wangwu'},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
### 自定义渲染
|
|
|
|
|
|
|
|
:::demo
|
|
|
|
```html
|
|
|
|
<div id="demo2" class="xm-select-demo"></div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var demo2 = xmSelect.render({
|
|
|
|
el: '#demo2',
|
|
|
|
template({ item, sels, name, value }){
|
|
|
|
return name + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
|
|
|
|
},
|
|
|
|
data: [
|
|
|
|
{name: '张三', value: 'zhangsan', selected: true},
|
|
|
|
{name: '李四', value: 'lisi', selected: true},
|
|
|
|
{name: '王五', value: 'wangwu'},
|
|
|
|
]
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
:::
|