记录Vue+Element UI 二次封装Select

 

第一次用这玩意，花了2天研究了下Vue，看了下Element UI的控件，觉得简直是颠覆三观，尼玛这个项目大把时间都花在前端了。。。。

花了大半天封装了一个Select，好多坑。

先上代码

组件：

<template>
    <div>
        <!--$attrs参数透传 原本控件的参数 如果是自己新加的就必须单独写,不然读取不到 -->
        <el-select v-bind="$attrs"
                   v-model="value"
                   v-bind:api="api"
                   v-on:change="change"
                   :optionList="optionList">
            <el-option v-for="item in GetoptionList"
                       :key="item.value || item.ID"
                       :label="item.label || item.Name"
                       :value="item.value || item.ID"
                       :disabled="item.disabled">
            </el-option>
        </el-select>
    </div>
</template>


<script>
    import axios from 'axios'
    export default {
        name: "h3select",
        data() {
            return {
                //value: null,
                optionList: null,
                api: null
            }
        },
        // 使用计算属性用于回显问题
        computed: {
            //value: function () {
            //    return this.$attrs.value || ''
            //},
            value: {
                get() {
                    return this.$attrs.value || null
                },
                set: function (selectval) {
                    //console.log(selectval);
                    this.$attrs.value = selectval || null;
                }
            },
            // 是否禁用
            disabled() {
                return this.$attrs.disabled || false
            },
            // 下拉选列表
            GetoptionList() {
                if (this.$attrs.api != null) {
                    return this.optionList;//获取当前组件上的属性
                }
                else {
                    return this.$attrs.optionList;//获取本实例上传进来的属性
                }
            },
            // 输入框尺寸
            size() {
                return this.$attrs.size
            },
            // 提示信息
            placeholder() {
                return this.$attrs.placeholder || '请选择'
            },
            // 是否可搜索
            filterable() {
                return this.$attrs.filterable === false ? this.$attrs.filterable : true
            },
            //是否可以清空选项
            clearable() {
                return this.$attrs.clearable || false
            }
        },
        methods: {
            change(val) {
                触发当前实例上的事件
                this.$emit('change', val);
            },
            getCompany() {
                if (this.$attrs.api != null) {
                    axios.get(this.$attrs.api, {       // 还可以直接把参数拼接在url后边
                        params: {
                            Name: ''//参数
                        }
                    }).then(res => {//这个地方如果要访问this.XXXX 必须用res=> {}方式
                        this.optionList = res.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        },
        created() {
            this.getCompany();
        }
    }
</script>

 写组件的时候，遇到的一些问题：

1、获取页面上的参数，如果没有加bing，组件里是获取不到的，v-bind="$attrs"，这个俊是参数透传，只要原本参数存在的，组件里面通过this.$attrs.XXX就能设置/获取它们。

2、axios方法then的时候一定要用res=>{},不要用function(res){}，他们访问的this是不一样的，这个问题坑了好久

3、控件默认值用了计算属性

4、绑定option的时候，试了下||，居然可以，提高兼容性。

vue页面

<h3select v-model="vip.option"
                          :optionList="vip.optionList"
                          :placeholder="vip.placeholder"
                          :size="'mini'"
                          :clearable="vip.clearable"
                          :filterable="vip.filterable"
                          :api="vip.api"
                          style="width: 200px;"
                          class="filter-item"
                          :label="'VIP'"
                          @change="changevip_option"></h3select>

 data() {
            return {
                vip: {
                    api: "http://......./GetCompanyList",
                    //select选项 true false 必须要加单引号。不然控件选择false无法选中
                    optionList: '',//[{ label: '是', value: 'true' }, { label: '否', value: 'false' }],//, disabled: true
                    //选中项 默认值
                    option: null,
                    //api
                    //开启清理
                    clearable: true,
                    //底纹字
                    placeholder: '是否VIP',
                    //筛选
                    filterable: true,
                }
}}

开始用测试对象是[{ label: '是', value: true}, { label: '否', value: false}]，结果发现当选false的时候，值改变了，但是无法选中。改成字符串才正常了。还有数据值是数字的也有坑，直接显示数字了，文本就不出来。

class style 这种的会原样输出。

 

引用

//引入自定义组件
import H3globalVue from './components/index'
Vue.use(H3globalVue);

在main.js中，全局注册，就不用每个页面都去加了。路径也是个坑，搞了好久。

要疯，简直反人类。。。