Element文档-自用(随时更新)

一类：表格

el-table外部标签,</el-table-column>为子标签

prop：可以使用外部绑定的数据中String类型字段。

 

代码：stripe 

作用：判断是否为斑马纹表格　

写入位置：外部标签

示范：

<el-table :data="tableData" stripe style="width: 100%">

 

代码：border

作用：纵向边框　三个参数medium / small / mini

写入位置：外部标签

示范：

size="small"

show-header:表头

示范：

:show-header = "false"

highlight-current-row :选中行更亮一点(单选) 外标签

 

多选： 

 <el-table-column
          type="selection"
          width="55">
        </el-table-column>

 

代码：sortable

作用：排序　　

写入位置：行内  内部需要排序的行写入sortable,外部标签-参数1为默认排序的列，参数二是排列方式

示范：

:default-sort = "{prop: 'date', order: 'descending'}"

 

 

代码：type="expand" 和 Scoped slot

作用：予以过多内容展开展示

写入位置：行内写入 type="expand"

示范：

<el-table-column type="expand">
        <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
             </el-form>
         </template>
 </el-table-column>        

 

slot-scope="props" 插槽，目前不清楚作用以及参数

 

 

代码：通过 row 和 col 组件，并通过 col 组件的 span 属性自由地组合布局。

作用：布局

写入位置：

示范：分别对应1，2，3，4，6栏布局，row代表横向，col代表纵向占比  gutter可以规定默认间隔


<el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>

 

代码：offset

写入位置：<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

 

代码：flex

写入位置：<el-row type="flex" class="row-bg">

 

代码：响应式

作用：参照bt的响应式

示范：

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

 

 

代码：font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

写入位置：样式

作用：调整字体