1.el-table

設定最大高度，當高於這個高度出現滾動條；highlight-current-row高亮；

el-table-column：可單獨設定align，type=“expand/index/selection”； 

this.$refs.tabRef.setCurrentRow(this.TabData[0]);//預設選中第一行
this.$refs.tabRef.selection //表格選中的內容
this.$refs.tabRef.clearSelection//清空選中的內容

slot-scope=“scope”

 <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">檢視</el-button>
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </el-table-column>

:row-cell-style或:header-cell-style="‘color’：‘red’"修改公共的樣式；

table出現空白的一列

原因：是寬度設定100%，給每一列設定寬度，寬了。  解決：刪掉一列的寬度

slot-scope=“header”設定表頭

 <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="輸入關鍵字搜尋"/>
      </template>
      <template slot-scope="scope">
        //內容
     </template>

2.el-input

前後設定的圖示slot：prefix（-icon ）、 suffix（ -icon ）、 prepend   、append；前面二個是寫在輸入框的裡面，後面二個是類似於一個input寫在輸入的外面

<div>
  <el-input placeholder="請輸入內容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>

//icon
<el-input
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input1">
  </el-input>

3.el-select

3.1 搜尋

el-select新增filterable屬性即可啟用搜索功能

為了啟用遠端搜尋，需要將filterable和remote設定為true，同時傳入一個remote-method

 3.2超出內容：

給select新增：popper-append-to-body="false"

4.el-dailog

:modal=false關閉遮罩層 ； 注意寫上寬度； 再次開啟時清空內容；

open（d）和close（d）事件

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>需要注意的是內容是預設不居中的</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

　el-dialog點選關閉不了  ，解決： 在標籤中加入@close=“closeDialog”

closeDialog(){
this.dialogData=";//清空資料
}

　清除資料el-form的內容：ref與model一致，this.$refs.nameA.resetFields()

<el-dialog :before-close="resetForm">

</el-dialog>

//清除裡面的el-form的內容，
//此時model與ref必須一致，才能this.$refs.nameA.resetFields()
<el-form  ref="nameA"  :model="nameA" label-width="140px">
   ...
</el-form>