element-ui大总结

element-ui 使用方法主要有4大块，slot ,属性， method和event。刚开始看这个不久，乍一看感觉有很多东西要记住使用。这个就当是做个主题阅读，知道基本的使用规则，快速索引。真正的熟练还是要在项目中多多练习才行，更重要的是有时间的时候，自己造出这些组建，了解后面的思维原理。

slot

<div style="width:800px;">
        <h1 class="mb20">slot</h1>
        <p>1.input slots</p>
        <el-input v-model="input22" placeholder="input prefix 效果">
          <!-- slot :prefix  suffix prepend append  只对type=text 有效-->
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-button type="primary" slot="prepend">prepend 前置</el-button>
          <el-button type="primary" slot="append">append 后置</el-button>
        </el-input>
        <p>2. Alert slot</p>
        <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
          <p slot>辅助性文字。同属性description</p>
        </el-alert>
        <p>3.Dropdown Slots
          <br>通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.
        </p>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-button type="primary">
              下拉菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p @click="centerDialogVisible = true">4. dialog Slot
          <!--  匿名  title footer -->
        </p>
        <el-dialog :visible="centerDialogVisible" :append-to-body="true">
          <p slot="title">title标题 slot</p>
          <p slot>匿名slot 即是内容模版</p>
          <div slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <p>5. table slot</p>
        <div>
          <el-table :data="hdData">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="开始时间" prop="begin"></el-table-column>
            <el-table-column label="结束时间" prop="end"></el-table-column>
            <el-table-column label="未成功">
              <!-- <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
              </template>-->
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

Attribute

 <h1 class="mb20">属性（基本在标签上直接展示就可以，⚠️有些属性的前面需要加:，如果自己的代码不生效可以看看是不是忽略了这个小细节）</h1>
      <el-input
        placeholder="请输入内容"
        v-model="input5"
        class="input-with-select"
        clearable
        autofocus
        suffix-icon="el-icon-search"
      >
        <el-select class="selectform" v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <div style="width:300px;">
        <div class="demo-input-suffix">
          <!-- 属性   suffix-icon -->
          <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"></el-input>
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input21"></el-input>
        </div>
      </div>

method

<h1>method</h1>
      <div style="width:500px">
        <p>method: 是绑定在DOM上的方法<br/>this.$refs[formName].resetFields();<br/>
         this.$refs[formName].validate</p>
         <p>如table 的<br/>
         this.$refs.multipleTable.toggleRowSelection(row);<br/>
         this.$refs.multipleTable.clearSelection();
         </p>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  type="fixed-time"
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

submitForm(formName) {
		// form 的validate方法
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
    	// form 的resetFields方法
      this.$refs[formName].resetFields();
    }

event

 <h1>event</h1>
      <div style="width:500px">
        event 是直接绑定在标签上是操作
        <!---@blur="testEvent"  input 框的blur-->
 <el-input
        placeholder="请输入内容"
        v-model="input5"
        class="input-with-select"
        clearable
        autofocus
        @blur="testEvent"
        suffix-icon="el-icon-search"
      >
      </el-input>
      </div>