Element作為一個(gè)Vue的組件庫(kù)，除了有一些bug之外還是挺好用的。
比如實(shí)現(xiàn)一個(gè)下拉框

<div id="app">
    <el-select v-model="selected" placeholder="選擇課程">
        <el-option :value="null" label="全部"></el-option>
        <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
    </el-select>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            selected: null,
            items: ["語(yǔ)文", "數(shù)學(xué)", "地理", "歷史", "英語(yǔ)", "物理"]
        }
    });
</script>

但如果一個(gè)系統(tǒng)中很多頁(yè)面需要用到這個(gè)東西，每次都要重寫(xiě)，也是挺麻煩的，所以可以考慮封裝一下
建一個(gè)my-element.js

Vue.component('my-select-ke', {
    data: function () {
        return {
            selected: null,
            items: ["語(yǔ)文", "數(shù)學(xué)", "地理", "歷史", "英語(yǔ)", "物理"]
        };
    },
    template: `
<el-select v-model="selected" placeholder="選擇課程">
    <el-option :value="null" label="全部"></el-option>
    <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});

現(xiàn)在只要引用js 就可以直接生效了

<script src="my-element.js"></script>

<div id="app">
    <my-select-ke></my-select-ke>
</div>

<script>
    var vm = new Vue({
        el: "#app
    });
</script>

效果和之前是一樣的

不過(guò)這個(gè)時(shí)候值是無(wú)法回傳的
所以需要再實(shí)現(xiàn)一個(gè) v-model 回傳選中的值

Vue.component('my-select-ke', {
    data: function () {
        return {
            selected: null,
            items: ["語(yǔ)文", "數(shù)學(xué)", "地理", "歷史", "英語(yǔ)", "物理"]
        };
    },
    model: {
        event: 'change'
    },
    watch: {
        selected: function (val) {
            this.$emit("change", val);
        }
    },
    template: `
<el-select v-model="selected" placeholder="選擇課程">
    <el-option :value="null" label="全部"></el-option>
    <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});

使用 model設(shè)置綁定事件，用watch觀察selected屬性，并觸發(fā)change事件發(fā)送值

<div id="app">
    <my-select-ke v-model="ke"></my-select-ke>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ke: null
        }
    });
</script>

現(xiàn)在就可以設(shè)置v-model屬性了

Element的select本身是支持多選的，如果我們自己的組件也需要多選，需要把multiple屬性傳遞到el-select中去

Vue.component('my-select-ke', {
    data: function () {
        return {
            selected: "",
            items: ["語(yǔ)文", "數(shù)學(xué)", "地理", "歷史", "英語(yǔ)", "物理"]
        };
    },
    props:["multiple"], //聲明props
    model: {
        event: 'change'
    },
    watch: {
        selected: function (val) {
            this.$emit("change", val);
        }
    },
    template: `
<el-select v-model="selected" placeholder="選擇課程" :multiple="multiple"> <!-- 傳遞屬性 -->
    <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
</el-select>`,
});

最后，如果列表的數(shù)據(jù)并不是寫(xiě)死的，而且通過(guò)接口獲取的，可以繼續(xù)改造

Vue.component('my-select-ke', {
    data: function () {
        return {
            selected: "",
            items: ["語(yǔ)文", "數(shù)學(xué)", "地理", "歷史", "英語(yǔ)", "物理"]
        };
    },
    props: ["query", "placeholder", "clearable", "size", "multiple"],
    model: { event: 'change' },
    watch: {
        selected: function (val) {
            this.$emit("change", val);
        }
    },
    methods: {
        ajax: function (key) {
            this.loading = true;
            var query = this.query || {};
            fetchival('/api/ke/list', { credentials: 'include' })
                .get({ keyWord: key, size: query.size })
                .then(function (data) {
                    this.loading = false;
                    this.items = data.Items;
                }.bind(this));
        },
        label: function (item) {
            return item.name + "(" + item.teacher + ")";
        }
    },
    mounted: function () {
        this.ajax();
    },
    template: `
<el-select v-model="selected" :multiple="multiple" :clearable="clearable" :size="size" :placeholder="placeholder" filterable remote :loading="loading" :remote-method="ajax" value-key="id">
    <el-option v-for="item in items" :key="item.id" :label="label(item)" :value="item"></el-option>
</el-select>`
});

<div id="app">
    <my-select-ke v-model="ke" :query="{size:5}"></my-select-ke>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ke: null,
        }
    });
</script>