EOS Low-Code Platform 8
学习指南
更新说明
初见EOS
专业代码开发手册
公共服务框架

# PmSelectRich

普通下拉框只能显示文本, 当需要下拉框显示更多样式时, 可以使用富文本选择器 alt text

默认形式

<template>
  <pm-select-rich :initData="data" v-model="value">
    <template slot-scope="{item}">
      <div :style="`color:${item.color}`"><i :class="`mr-20 ${item.icon}`"></i>{{item.label}}</div>
    </template>
  </pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅",
          color: "red",
          icon: "el-icon-platform-eleme",
        },
        {
          value: "2",
          label: "砂锅",
           color: "blue",
           icon:"el-icon-user-solid",
        },
        {
          value: "3",
          label: "地锅鸡",
          color: "green",
          icon:"el-icon-star-on",
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码

# action

image-20241220153732082

action

<template>
  <pm-select-rich :params="params" :initData="data" :loadSelectedData="loadSelectedData" :paging="true" v-model="value">
    <div slot slot-scope="scope">{{ scope.item }}</div>
  </pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "4",
      params: {
        id: 0
      },
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  created() {
  },
  methods: {
    async loadSelectedData() {
      return {
        value: "4",
        label: "烧鸡",
        color: "green",
        icon:"el-icon-star-on",
      }
    }
  }
}
</script>
显示代码 复制代码

# 支持搜索

image-20241220153929492

支持搜索

<template>
  <pm-select-rich :filterable="true" :initData="data" v-model="value">
    <template slot-scope="{item}">
      <div :style="`color:${item.color}`"><i :class="`mr-20 ${item.icon}`"></i>{{item.label}}</div>
    </template>
  </pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅",
          color: "red",
          icon: "el-icon-platform-eleme",
        },
        {
          value: "2",
          label: "砂锅",
           color: "blue",
           icon:"el-icon-user-solid",
        },
        {
          value: "3",
          label: "地锅鸡",
          color: "green",
          icon:"el-icon-star-on",
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码

# 无边框

image-20241220154118039

无边框

<template>
  <pm-select-rich :border="false" :initData="data" v-model="value"></pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码

# 禁用

image-20241220154040492

禁用

<template>
  <pm-select-rich :disabled="true" :initData="data" v-model="value"></pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码

# 多选

image-20241220154207942

多选

<template>
  <pm-select-rich :multiple="true" :initData="data" v-model="value"></pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码

# 指定下拉框宽度

指定下拉框宽度 popoverWidth

<template>
  <pm-select-rich :popoverWidth="400" :initData="data" v-model="value"></pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>

# slot

image-20241220154419880

slot

<template>
  <pm-select-rich :paging="true" :initData="data" v-model="value">
    <div slot slot-scope="scope">{{ scope.item }}</div>
  </pm-select-rich>
</template>
<script>
export default {
  data () {
    return {
      value: "1",
      data: [
        {
          value: "1",
          label: "火锅"
        },
        {
          value: "2",
          label: "砂锅"
        },
        {
          value: "3",
          label: "地锅鸡"
        }
      ]
    }
  },
  methods: {
  }
}
</script>
显示代码 复制代码
显示代码 复制代码

# Attributes

参数 说明 类型 可选值 默认值
placeholder 默认填充 string — 请选择
filterable 是否可搜索 string — —
searchPlaceholder 检索框提示文字 string - '查询...'
border 是否显示边框，为true时 icon不显示 boolean - false
disabled 是否禁用 boolean - false
readonly 是否只读 boolean - false
clearable 是否可清空 boolean - false
multiple 是否支持多选 boolean - false
popoverWidth 下拉框宽度 string、number - 默认容器宽度
paging 是否分页 boolean - false
pagingData 分页信息 Object { limit: 10, offset: 1 } null
action Api方法 Object - null
dataField Api方法返回值对应的数组字段名,如返回数组则可为空 string - null
params 方法参数 array,object,string - null
valueField value对应的字段 string - value
labelField label对应的字段 string - label
initData 静态数据 array - null
deep 是否深度监听params Booleab - false
filter 返回参数过滤 Function - null
loadSelectedData 获取选中的数据，参数 value Function - null

# Slot

Name Description
— options item

← select-tree 下拉树 →