add global setting $IVIEW
This commit is contained in:
梁灏
parent
e94e76435e
commit
517917a2ad
4 changed files with 48 additions and 957 deletions
|
|
@ -10,7 +10,10 @@ import iView from '../src/index';
|
||||||
import locale from '../src/locale/lang/zh-CN';
|
import locale from '../src/locale/lang/zh-CN';
|
||||||
|
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
Vue.use(iView, { locale });
|
Vue.use(iView, {
|
||||||
|
locale,
|
||||||
|
transfer: true
|
||||||
|
});
|
||||||
|
|
||||||
// 开启debug模式
|
// 开启debug模式
|
||||||
Vue.config.debug = true;
|
Vue.config.debug = true;
|
||||||
|
|
|
||||||
|
|
@ -1,959 +1,40 @@
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--{{model10}} - -->
|
|
||||||
<!--{{model11}}-->
|
|
||||||
<!--<Select -->
|
|
||||||
<!--v-model="model10" -->
|
|
||||||
<!--style="width:260px">-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(item, index) in cityList" -->
|
|
||||||
<!--:value="item.value" -->
|
|
||||||
<!--:key="index">{{item.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--<Select -->
|
|
||||||
<!--v-model="model11" -->
|
|
||||||
<!--style="width:260px">-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(item, index) in cityList" -->
|
|
||||||
<!--:value="item.value" -->
|
|
||||||
<!--:key="index">{{item.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--cityList: [],-->
|
|
||||||
<!--model10: '',-->
|
|
||||||
<!--model11: '',-->
|
|
||||||
<!--model12: '',-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
<!--mounted() {-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.cityList = [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'beijing',-->
|
|
||||||
<!--label: '北京市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'shanghai',-->
|
|
||||||
<!--label: '上海市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'shenzhen',-->
|
|
||||||
<!--label: '深圳市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'hangzhou',-->
|
|
||||||
<!--label: '杭州市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'nanjing',-->
|
|
||||||
<!--label: '南京市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'chongqing',-->
|
|
||||||
<!--label: '重庆市',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--];-->
|
|
||||||
<!--}, 1000);-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Select v-model="value">-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="item in list" -->
|
|
||||||
<!--:value="item.value" -->
|
|
||||||
<!--:label="item.label" -->
|
|
||||||
<!--:key="item.value"></Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--<Button @click="setList">set list</Button>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--value: '',-->
|
|
||||||
<!--list: [],-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--setList() {-->
|
|
||||||
<!--const list = [];-->
|
|
||||||
<!--for (let i = 0; i < 400; i++) {-->
|
|
||||||
<!--list.push({-->
|
|
||||||
<!--value: `value${i}`,-->
|
|
||||||
<!--label: `label${i}`,-->
|
|
||||||
<!--});-->
|
|
||||||
<!--}-->
|
|
||||||
<!--this.list = list;-->
|
|
||||||
<!--},-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div style="width: 400px;margin: 50px;">-->
|
|
||||||
<!--<div>data: {{model13}}</div>-->
|
|
||||||
<!--<Row>-->
|
|
||||||
<!--<Col -->
|
|
||||||
<!--span="12" -->
|
|
||||||
<!--style="padding-right:10px">-->
|
|
||||||
<!--<Select-->
|
|
||||||
<!--v-model="model13"-->
|
|
||||||
<!--:remote-method="remoteMethod1"-->
|
|
||||||
<!--:loading="loading1"-->
|
|
||||||
<!--size="small"-->
|
|
||||||
<!--placeholder="提示提示"-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote-->
|
|
||||||
<!--transfer>-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(option, index) in options1" -->
|
|
||||||
<!--:value="option.value" -->
|
|
||||||
<!--:key="index">{{option.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</Col>-->
|
|
||||||
<!--<Col span="12">-->
|
|
||||||
<!--<Select-->
|
|
||||||
<!--v-model="model14"-->
|
|
||||||
<!--:remote-method="remoteMethod2"-->
|
|
||||||
<!--:loading="loading2"-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote>-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(option, index) in options2" -->
|
|
||||||
<!--:value="option.value" -->
|
|
||||||
<!--:key="index">{{option.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</Col>-->
|
|
||||||
<!--</Row>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--model13: '',-->
|
|
||||||
<!--loading1: false,-->
|
|
||||||
<!--options1: [],-->
|
|
||||||
<!--model14: [],-->
|
|
||||||
<!--loading2: false,-->
|
|
||||||
<!--options2: [],-->
|
|
||||||
<!--list: [-->
|
|
||||||
<!--'Alabama',-->
|
|
||||||
<!--'Alaska',-->
|
|
||||||
<!--'Arizona',-->
|
|
||||||
<!--'Arkansas',-->
|
|
||||||
<!--'California',-->
|
|
||||||
<!--'Colorado',-->
|
|
||||||
<!--'Connecticut',-->
|
|
||||||
<!--'Delaware',-->
|
|
||||||
<!--'Florida',-->
|
|
||||||
<!--'Georgia',-->
|
|
||||||
<!--'Hawaii',-->
|
|
||||||
<!--'Idaho',-->
|
|
||||||
<!--'Illinois',-->
|
|
||||||
<!--'Indiana',-->
|
|
||||||
<!--'Iowa',-->
|
|
||||||
<!--'Kansas',-->
|
|
||||||
<!--'Kentucky',-->
|
|
||||||
<!--'Louisiana',-->
|
|
||||||
<!--'Maine',-->
|
|
||||||
<!--'Maryland',-->
|
|
||||||
<!--'Massachusetts',-->
|
|
||||||
<!--'Michigan',-->
|
|
||||||
<!--'Minnesota',-->
|
|
||||||
<!--'Mississippi',-->
|
|
||||||
<!--'Missouri',-->
|
|
||||||
<!--'Montana',-->
|
|
||||||
<!--'Nebraska',-->
|
|
||||||
<!--'Nevada',-->
|
|
||||||
<!--'New hampshire',-->
|
|
||||||
<!--'New jersey',-->
|
|
||||||
<!--'New mexico',-->
|
|
||||||
<!--'New york',-->
|
|
||||||
<!--'North carolina',-->
|
|
||||||
<!--'North dakota',-->
|
|
||||||
<!--'Ohio',-->
|
|
||||||
<!--'Oklahoma',-->
|
|
||||||
<!--'Oregon',-->
|
|
||||||
<!--'Pennsylvania',-->
|
|
||||||
<!--'Rhode island',-->
|
|
||||||
<!--'South carolina',-->
|
|
||||||
<!--'South dakota',-->
|
|
||||||
<!--'Tennessee',-->
|
|
||||||
<!--'Texas',-->
|
|
||||||
<!--'Utah',-->
|
|
||||||
<!--'Vermont',-->
|
|
||||||
<!--'Virginia',-->
|
|
||||||
<!--'Washington',-->
|
|
||||||
<!--'West virginia',-->
|
|
||||||
<!--'Wisconsin',-->
|
|
||||||
<!--'Wyoming',-->
|
|
||||||
<!--],-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--remoteMethod1(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading1 = true;-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading1 = false;-->
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options1 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--remoteMethod2(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading2 = true;-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading2 = false;-->
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options2 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div style="width: 300px">-->
|
|
||||||
<!--<Select-->
|
|
||||||
<!--v-model="model14"-->
|
|
||||||
<!--:remote-method="remoteMethod2"-->
|
|
||||||
<!--:loading="loading2"-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote>-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(option, index) in options2" -->
|
|
||||||
<!--:value="option.value" -->
|
|
||||||
<!--:key="index">{{option.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--model13: '',-->
|
|
||||||
<!--loading1: false,-->
|
|
||||||
<!--options1: [],-->
|
|
||||||
<!--model14: [],-->
|
|
||||||
<!--loading2: false,-->
|
|
||||||
<!--options2: [],-->
|
|
||||||
<!--list: ['a', 'b', 'c'],-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--remoteMethod2(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading2 = true;-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading2 = false;-->
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options2 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<Row>-->
|
|
||||||
<!--<Col -->
|
|
||||||
<!--span="12" -->
|
|
||||||
<!--style="padding-right:10px">-->
|
|
||||||
<!--<Select-->
|
|
||||||
<!--v-model="model13"-->
|
|
||||||
<!--:remote-method="remoteMethod1"-->
|
|
||||||
<!--:loading="loading1"-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote>-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(option, index) in options1" -->
|
|
||||||
<!--:value="option.value" -->
|
|
||||||
<!--:key="index">{{option.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</Col>-->
|
|
||||||
<!--<Col span="12">-->
|
|
||||||
<!--<Select-->
|
|
||||||
<!--v-model="model14"-->
|
|
||||||
<!--:remote-method="remoteMethod2"-->
|
|
||||||
<!--:loading="loading2"-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote>-->
|
|
||||||
<!--<Option -->
|
|
||||||
<!--v-for="(option, index) in options2" -->
|
|
||||||
<!--:value="option.value" -->
|
|
||||||
<!--:key="index">{{option.label}}</Option>-->
|
|
||||||
<!--</Select>-->
|
|
||||||
<!--</Col>-->
|
|
||||||
<!--</Row>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--model13: '',-->
|
|
||||||
<!--loading1: false,-->
|
|
||||||
<!--options1: [],-->
|
|
||||||
<!--model14: [],-->
|
|
||||||
<!--loading2: false,-->
|
|
||||||
<!--options2: [],-->
|
|
||||||
<!--list: [-->
|
|
||||||
<!--'Alabama',-->
|
|
||||||
<!--'Alaska',-->
|
|
||||||
<!--'Arizona',-->
|
|
||||||
<!--'Arkansas',-->
|
|
||||||
<!--'California',-->
|
|
||||||
<!--'Colorado',-->
|
|
||||||
<!--'Connecticut',-->
|
|
||||||
<!--'Delaware',-->
|
|
||||||
<!--'Florida',-->
|
|
||||||
<!--'Georgia',-->
|
|
||||||
<!--'Hawaii',-->
|
|
||||||
<!--'Idaho',-->
|
|
||||||
<!--'Illinois',-->
|
|
||||||
<!--'Indiana',-->
|
|
||||||
<!--'Iowa',-->
|
|
||||||
<!--'Kansas',-->
|
|
||||||
<!--'Kentucky',-->
|
|
||||||
<!--'Louisiana',-->
|
|
||||||
<!--'Maine',-->
|
|
||||||
<!--'Maryland',-->
|
|
||||||
<!--'Massachusetts',-->
|
|
||||||
<!--'Michigan',-->
|
|
||||||
<!--'Minnesota',-->
|
|
||||||
<!--'Mississippi',-->
|
|
||||||
<!--'Missouri',-->
|
|
||||||
<!--'Montana',-->
|
|
||||||
<!--'Nebraska',-->
|
|
||||||
<!--'Nevada',-->
|
|
||||||
<!--'New hampshire',-->
|
|
||||||
<!--'New jersey',-->
|
|
||||||
<!--'New mexico',-->
|
|
||||||
<!--'New york',-->
|
|
||||||
<!--'North carolina',-->
|
|
||||||
<!--'North dakota',-->
|
|
||||||
<!--'Ohio',-->
|
|
||||||
<!--'Oklahoma',-->
|
|
||||||
<!--'Oregon',-->
|
|
||||||
<!--'Pennsylvania',-->
|
|
||||||
<!--'Rhode island',-->
|
|
||||||
<!--'South carolina',-->
|
|
||||||
<!--'South dakota',-->
|
|
||||||
<!--'Tennessee',-->
|
|
||||||
<!--'Texas',-->
|
|
||||||
<!--'Utah',-->
|
|
||||||
<!--'Vermont',-->
|
|
||||||
<!--'Virginia',-->
|
|
||||||
<!--'Washington',-->
|
|
||||||
<!--'West virginia',-->
|
|
||||||
<!--'Wisconsin',-->
|
|
||||||
<!--'Wyoming',-->
|
|
||||||
<!--],-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--remoteMethod1(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading1 = true;-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading1 = false;-->
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options1 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--remoteMethod2(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading2 = true;-->
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading2 = false;-->
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options2 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div id="app">-->
|
|
||||||
<!--<input><br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model1"-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model2"-->
|
|
||||||
<!--size="small"-->
|
|
||||||
<!--style="width:100px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model3"-->
|
|
||||||
<!--style="width:100px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model4"-->
|
|
||||||
<!--size="large"-->
|
|
||||||
<!--style="width:100px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model5"-->
|
|
||||||
<!--disabled-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model6"-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option value="beijing">New York</i-option>-->
|
|
||||||
<!--<i-option -->
|
|
||||||
<!--value="shanghai" -->
|
|
||||||
<!--disabled>London</i-option>-->
|
|
||||||
<!--<i-option value="shenzhen">Sydney</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model8"-->
|
|
||||||
<!--clearable-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model7"-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<option-group label="Hot Cities">-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList1"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</option-group>-->
|
|
||||||
<!--<option-group label="Other Cities">-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList2"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</option-group>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model9"-->
|
|
||||||
<!--style="width:200px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option -->
|
|
||||||
<!--value="New York" -->
|
|
||||||
<!--label="New York">-->
|
|
||||||
<!--<span>New York</span>-->
|
|
||||||
<!--<span style="float:right;color:#ccc">America</span>-->
|
|
||||||
<!--</i-option>-->
|
|
||||||
<!--<i-option -->
|
|
||||||
<!--value="London" -->
|
|
||||||
<!--label="London">-->
|
|
||||||
<!--<span>London</span>-->
|
|
||||||
<!--<span style="float:right;color:#ccc">U.K.</span>-->
|
|
||||||
<!--</i-option>-->
|
|
||||||
<!--<i-option -->
|
|
||||||
<!--value="Sydney" -->
|
|
||||||
<!--label="Sydney">-->
|
|
||||||
<!--<span>Sydney</span>-->
|
|
||||||
<!--<span style="float:right;color:#ccc">Australian</span>-->
|
|
||||||
<!--</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<div>here</div>-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model10"-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!--style="width:260px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<row>-->
|
|
||||||
<!--<i-col-->
|
|
||||||
<!--span="12"-->
|
|
||||||
<!--style="padding-right:10px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model11"-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="12">-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model12"-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="item in cityList"-->
|
|
||||||
<!--:value="item.value"-->
|
|
||||||
<!--:key="item.value"-->
|
|
||||||
<!-->{{item.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--</row>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<row>-->
|
|
||||||
<!--<i-col-->
|
|
||||||
<!--span="12"-->
|
|
||||||
<!--style="padding-right:10px"-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model13"-->
|
|
||||||
<!--:remote-method="remoteMethod1"-->
|
|
||||||
<!--:loading="loading1"-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote-->
|
|
||||||
<!--clearable-->
|
|
||||||
<!-->-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="(option, index) in options1"-->
|
|
||||||
<!--:value="option.value"-->
|
|
||||||
<!--:key="index"-->
|
|
||||||
<!-->{{option.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="12">-->
|
|
||||||
<!--<i-select-->
|
|
||||||
<!--v-model="model14"-->
|
|
||||||
<!--:remote-method="remoteMethod2"-->
|
|
||||||
<!--:loading="loading2"-->
|
|
||||||
<!--multiple-->
|
|
||||||
<!--filterable-->
|
|
||||||
<!--remote-->
|
|
||||||
<!--clearable>-->
|
|
||||||
<!--<i-option-->
|
|
||||||
<!--v-for="(option, index) in options2"-->
|
|
||||||
<!--:value="option.value"-->
|
|
||||||
<!--:key="index"-->
|
|
||||||
<!-->{{option.label}}</i-option>-->
|
|
||||||
<!--</i-select>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--</row>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data() {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--cityList: [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'New York',-->
|
|
||||||
<!--label: 'New York',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'London',-->
|
|
||||||
<!--label: 'London',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Sydney',-->
|
|
||||||
<!--label: 'Sydney',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Ottawa',-->
|
|
||||||
<!--label: 'Ottawa',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Paris',-->
|
|
||||||
<!--label: 'Paris',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Canberra',-->
|
|
||||||
<!--label: 'Canberra',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--],-->
|
|
||||||
<!--cityList1: [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'New York',-->
|
|
||||||
<!--label: 'New York',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'London',-->
|
|
||||||
<!--label: 'London',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Sydney',-->
|
|
||||||
<!--label: 'Sydney',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--],-->
|
|
||||||
<!--cityList2: [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Ottawa',-->
|
|
||||||
<!--label: 'Ottawa',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Paris',-->
|
|
||||||
<!--label: 'Paris',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--value: 'Canberra',-->
|
|
||||||
<!--label: 'Canberra',-->
|
|
||||||
<!--},-->
|
|
||||||
<!--],-->
|
|
||||||
<!--model1: '',-->
|
|
||||||
<!--model2: '',-->
|
|
||||||
<!--model3: '',-->
|
|
||||||
<!--model4: '',-->
|
|
||||||
<!--model5: '',-->
|
|
||||||
<!--model6: '',-->
|
|
||||||
<!--model7: '',-->
|
|
||||||
<!--model8: '',-->
|
|
||||||
<!--model9: '',-->
|
|
||||||
<!--model10: [],-->
|
|
||||||
<!--model11: '',-->
|
|
||||||
<!--model12: [],-->
|
|
||||||
<!--model13: '',-->
|
|
||||||
<!--loading1: false,-->
|
|
||||||
<!--options1: [],-->
|
|
||||||
<!--model14: [],-->
|
|
||||||
<!--loading2: false,-->
|
|
||||||
<!--options2: [],-->
|
|
||||||
<!--list: [-->
|
|
||||||
<!--'Alabama',-->
|
|
||||||
<!--'Alaska',-->
|
|
||||||
<!--'Arizona',-->
|
|
||||||
<!--'Arkansas',-->
|
|
||||||
<!--'California',-->
|
|
||||||
<!--'Colorado',-->
|
|
||||||
<!--'Connecticut',-->
|
|
||||||
<!--'Delaware',-->
|
|
||||||
<!--'Florida',-->
|
|
||||||
<!--'Georgia',-->
|
|
||||||
<!--'Hawaii',-->
|
|
||||||
<!--'Idaho',-->
|
|
||||||
<!--'Illinois',-->
|
|
||||||
<!--'Indiana',-->
|
|
||||||
<!--'Iowa',-->
|
|
||||||
<!--'Kansas',-->
|
|
||||||
<!--'Kentucky',-->
|
|
||||||
<!--'Louisiana',-->
|
|
||||||
<!--'Maine',-->
|
|
||||||
<!--'Maryland',-->
|
|
||||||
<!--'Massachusetts',-->
|
|
||||||
<!--'Michigan',-->
|
|
||||||
<!--'Minnesota',-->
|
|
||||||
<!--'Mississippi',-->
|
|
||||||
<!--'Missouri',-->
|
|
||||||
<!--'Montana',-->
|
|
||||||
<!--'Nebraska',-->
|
|
||||||
<!--'Nevada',-->
|
|
||||||
<!--'New hampshire',-->
|
|
||||||
<!--'New jersey',-->
|
|
||||||
<!--'New mexico',-->
|
|
||||||
<!--'New york',-->
|
|
||||||
<!--'North carolina',-->
|
|
||||||
<!--'North dakota',-->
|
|
||||||
<!--'Ohio',-->
|
|
||||||
<!--'Oklahoma',-->
|
|
||||||
<!--'Oregon',-->
|
|
||||||
<!--'Pennsylvania',-->
|
|
||||||
<!--'Rhode island',-->
|
|
||||||
<!--'South carolina',-->
|
|
||||||
<!--'South dakota',-->
|
|
||||||
<!--'Tennessee',-->
|
|
||||||
<!--'Texas',-->
|
|
||||||
<!--'Utah',-->
|
|
||||||
<!--'Vermont',-->
|
|
||||||
<!--'Virginia',-->
|
|
||||||
<!--'Washington',-->
|
|
||||||
<!--'West virginia',-->
|
|
||||||
<!--'Wisconsin',-->
|
|
||||||
<!--'Wyoming',-->
|
|
||||||
<!--],-->
|
|
||||||
<!--};-->
|
|
||||||
<!--},-->
|
|
||||||
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--remoteMethod1(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading1 = true;-->
|
|
||||||
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading1 = false;-->
|
|
||||||
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
|
|
||||||
<!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
|
||||||
<!--}, 1500);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options1 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--remoteMethod2(query) {-->
|
|
||||||
<!--if (query !== '') {-->
|
|
||||||
<!--this.loading2 = true;-->
|
|
||||||
|
|
||||||
<!--setTimeout(() => {-->
|
|
||||||
<!--this.loading2 = false;-->
|
|
||||||
|
|
||||||
<!--const list = this.list.map((item) => ({-->
|
|
||||||
<!--value: item,-->
|
|
||||||
<!--label: item,-->
|
|
||||||
<!--}));-->
|
|
||||||
|
|
||||||
<!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
|
|
||||||
<!--}, 200);-->
|
|
||||||
<!--} else {-->
|
|
||||||
<!--this.options2 = [];-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--},-->
|
|
||||||
<!--};-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Select v-model="model1" style="width:200px">
|
||||||
<Select
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
v-model="model1"
|
</Select>
|
||||||
size="small"
|
|
||||||
style="width:200px;" >
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
<Select
|
|
||||||
v-model="model10"
|
|
||||||
size="small"
|
|
||||||
multiple
|
|
||||||
style="width:260px" >
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
v-model="model1"
|
|
||||||
size="large"
|
|
||||||
style="width:200px"
|
|
||||||
clearable
|
|
||||||
@on-clear="onClear">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
<Select
|
|
||||||
v-model="model10"
|
|
||||||
size="large"
|
|
||||||
multiple
|
|
||||||
style="width:260px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
v-model="model1"
|
|
||||||
style="width:200px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
<Select
|
|
||||||
v-model="model11"
|
|
||||||
multiple
|
|
||||||
style="width:260px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
<Select
|
|
||||||
v-model="model10"
|
|
||||||
multiple
|
|
||||||
style="width:260px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<Select
|
|
||||||
v-model="model10"
|
|
||||||
multiple
|
|
||||||
style="width:260px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<br><br>
|
|
||||||
<Select
|
|
||||||
v-model="model10"
|
|
||||||
multiple
|
|
||||||
style="width:260px">
|
|
||||||
<Option
|
|
||||||
v-for="item in cityList"
|
|
||||||
:value="item.value"
|
|
||||||
:key="item.value">{{item.label}}</Option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
cityList: [
|
cityList: [
|
||||||
{
|
{
|
||||||
value: 'New York',
|
value: 'New York',
|
||||||
label: 'New York',
|
label: 'New York'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '中国',
|
value: 'London',
|
||||||
label: '中国',
|
label: 'London'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Sydney',
|
value: 'Sydney',
|
||||||
label: 'Sydney',
|
label: 'Sydney'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Ottawa',
|
value: 'Ottawa',
|
||||||
label: 'Ottawa',
|
label: 'Ottawa'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Paris',
|
value: 'Paris',
|
||||||
label: 'Paris',
|
label: 'Paris'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Canberra',
|
value: 'Canberra',
|
||||||
label: 'Canberra',
|
label: 'Canberra'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
model1: '',
|
model1: ''
|
||||||
model10: [],
|
}
|
||||||
model11: [],
|
}
|
||||||
};
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClear() {
|
|
||||||
console.log('onClear');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -204,7 +204,9 @@
|
||||||
},
|
},
|
||||||
transfer: {
|
transfer: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default () {
|
||||||
|
return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// Use for AutoComplete
|
// Use for AutoComplete
|
||||||
autoComplete: {
|
autoComplete: {
|
||||||
|
|
|
||||||
|
|
@ -164,6 +164,11 @@ const install = function(Vue, opts = {}) {
|
||||||
Vue.component(key, iview[key]);
|
Vue.component(key, iview[key]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Vue.prototype.$IVIEW = {
|
||||||
|
size: opts.size || '',
|
||||||
|
transfer: opts.transfer || ''
|
||||||
|
};
|
||||||
|
|
||||||
Vue.prototype.$Loading = LoadingBar;
|
Vue.prototype.$Loading = LoadingBar;
|
||||||
Vue.prototype.$Message = Message;
|
Vue.prototype.$Message = Message;
|
||||||
Vue.prototype.$Modal = Modal;
|
Vue.prototype.$Modal = Modal;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue