PmSelect

继承自 el-select (opens new window) 并扩展了数据接入方式

静态数据

默认形式

<template>
  <pm-select  
    v-model="value" 
    mode='edit'
    :settings='{"type":"custom","options":data,"valueField":null,"labelField":null,}'>
  </pm-select>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>

显示代码 复制代码 复制代码

对接 字典

默认形式

<template>
 <pm-select 
    v-model="value" 
    mode='edit'
    :settings='{"type":"dict","dictTypeCode":"gender"}'>
  </pm-select>
</template>
<script>
export default {
  data () {
    return {
      value: ""
    }
  },
  methods: {
  }
}
</script>

显示代码 复制代码 复制代码

高亮显示

高亮显示 isHighlight

<template>
  <pm-select 
    v-model="value1" 
    :isHighlight="true"
    mode='edit'
    :settings='{"type":"dict","dictTypeCode":"gender"}'>
  </pm-select>
  <pm-select  
    v-model="value2"
    :isHighlight="true"
    mode='edit'
    :settings='{"type":"custom","options":v_options_1734683190974,"valueField":null,"labelField":null}'>
  </pm-select>
       
</template>
<script>
export default {
  data () {
    return {
      value1: "",
      value2: "",
      data:[
        {"code":"1","name":"火锅","extend":"#FF7875"},
        {"code":"2","name":"砂锅","extend":"rgba(19, 194, 2, 1)"},
        {"code":"3","name":"地锅鸡","extend":"#FFA940"}
      ]
    }
  },
  methods: {
  }
}
</script>

显示代码 复制代码 复制代码

自定义渲染模版

optionTemplateIsEnable

<template>
  <pm-select  
   v-model="value" 
   mode='edit'
   :settings='{"type":"custom","options":v_options_1734684694020,"valueField":null,"labelField":null}'
   :optionTemplateIsEnable='true'>
  <div slot-scope="{data}">
    <span style="float: left; font-size: 14px;">{{ data.name }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ data.code}}</span>
  </div>
  </pm-select>
</template>
<script>
export default {
  data () {
    return {
      value: "",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

继承 el-select 属性

参数	说明	类型	可选值	默认值
mode	模式	String	edit/view	edit
filterable	是否可搜索	Booleab	-	false
clearable	是否可清空	Booleab	-	true
isHighlight	是否高亮	Booleab	-	false
optionTemplateIsEnable	开启自定义渲染模版	Booleab	-	false

settings详情

参数	说明	类型	可选值	默认值
type	绑定数据类型	String	custom/dict	-
labelField	自定义数据显示字段	String	-	label
valueField	自定义数据值字段	String	-	value

Events

继承 el-select 事件