elementUI-select基礎屬性

時間 2019-11-12

標籤 elementui select 基礎屬性简体版

原文原文鏈接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>選擇器</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
	  <div id="app">
	  	<el-select
	  	   v-model="value"
	  	   v-loading="loading"
	  	   filterable
	  	   remote
	  	   :remote-method="remoteMethod"
	  	   multiple
	  	   placeholder="請輸入">
	  	  <el-option 
	  	    v-for="v in options"
	  	    :key="v.id"
	  	    :label="v.name"
	  	    :value="v.typeId"
	  	    :disabled="v.isShow"
	  	    >
	  	  </el-option>
	  	</el-select>
	  </div>
	  <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
      /*
       * 1.基本顯示:有三值
       * 2.disabled:加在el-option禁用選項,默認爲true(禁用);加在el-select禁用整個選擇器
       * 3.clearable: 清空選項，只用於單選
       * 4.multiple: 用於多選，返回一個數組給，v-mode的變量設置爲數組
       * 5.遠程搜索:filterable，remote，:remote-method，有模糊查詢接口
       */
    	new Vue({
    	  el: "#app",
    	  components: {},
    	  props: [],
    	  data () {
    	    return {
    	      data: 345,
    	      value: [],
    	      loading: false,
    	      data: [],
    	      options: [
    	       {
    	         id: 1,
    	         name: '王鬆',
    	         typeId: 3463,
    	         isShow: false
    	       }, {
               id: 2,
               name: '李三',
               typeId: 4255,
               isShow: false
             }, {
               id: 3,
               name: '劉燕',
               typeId: 5632,
               isShow: true
             }, {
               id: 4,
               name: '林武',
               typeId: 3525,
               isShow: false
             }
    	      ]
    	    }
    	  },
    	  methods: {
    	    output() {
    	      this.value = []/*經過id初始化*/
    	    },
    	    remoteMethod(query) {
    	      if (query != '') {
//  	        this.data = this.options
//  	        this.loading = true
    	      }
    	    }
    	  },
    	  mounted() {
    	    this.output()
    	  }
    	});
    </script>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。