xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

shit element ui

element ui & select change event demo

https://element.eleme.io/#/en-US/component/selecthttps://element.eleme.io/#/en-US/component/selecthttps://element.eleme.io/#/en-US/component/select#select-events

https://element.eleme.io/#/en-US/component/select#select-events

---

https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element

https://stackoverflow.com/questions/47873386/vue-js-element-ui-get-event-target-at-change

@change="changeHandler"

https://stackoverflow.com/questions/43839066/how-can-i-set-selected-option-selected-in-vue-js-2

solution

    <el-select
        v-model="status"
        @change="selectChange"
        placeholder="请选择状态"
        size="mini">
        <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>


    selectChange() {
        console.log(`select value is changed!`, this.$data.status);
    },

---

shit element ui

select-events & input-events

https://element.eleme.io/#/en-US/component/select#select-events
https://element.eleme.io/#/en-US/component/input#input-events

table & multiple-select

https://element.eleme.io/#/en-US/component/table#multiple-select

https://vuejs.org/v2/guide/forms.html#Select

v-bind & :bind

https://vuejs.org/v2/api/#v-bind

---

vue & $refs

DOM & ref

https://vuejs.org/v2/api/#ref

    getSearchData() {
        // this.$refs.input === ref="input"
        // let input = document.querySelector(`[data-input="search"]`);
        let {
            status,
            value,
        } = this.$data;
        // api
        let url = URLs.account;
        // JSON
        const options = {};
        if (status) {
            options["status"] = status;
        }
        if (input.value) {
            // options["keyWord"] = input.value;
            options["keyWord"] = value;
        }
        // clear
        // input.value = "";
        this.$data.value = "";
        // console.log(`Search options =
`, JSON.stringify(options, null, 4));
        // console.log(`Search options =
%c${JSON.stringify(options, null, 4)}`, `background: #000; color: #0f0;`);
        console.log(`Search options =
%c${JSON.stringify(options, null, 4)}`, `background: #fff; color: #0f0;`);
        this.fetchTableData(url, options);
    },

    getSearchData() {
        // this.$refs.input === ref="input"
        // let input = document.querySelector(`[data-input="search"]`);
        let {
            status,
            value,
        } = this.$data;
        // api
        let url = URLs.account;
        // JSON
        const options = {};
        if (status) {
            options["status"] = status;
        }
        if (value) {
            options["keyWord"] = value;
        }
        // if (input.value) {
        //     options["keyWord"] = input.value;
        // }
        // clear
        // input.value = "";
        this.$data.value = "";
        // console.log(`Search options =
`, JSON.stringify(options, null, 4));
        // console.log(`Search options =
%c${JSON.stringify(options, null, 4)}`, `background: #000; color: #0f0;`);
        console.log(`Search options =
%c${JSON.stringify(options, null, 4)}`, `background: #fff; color: #0f0;`);
        this.fetchTableData(url, options);
    },

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---