1表格 2输入框 3下拉框 4弹框

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>

　　

标签：slot,el,tabRef,refs,弹框,输入框,内容,设置,下拉框
来源： https://www.cnblogs.com/lxq3280/p/16168711.html