element-ui 使用(5)

element-ui 使用(5)

15.DatePicker 日期选择器

用于选择或输入日期
以「日」为基本单位，基础的日期选择控件

使用

    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

Attributes 属性

• value / v-model绑定值 类型date(DatePicker) / array(DateRangePicker)✨
• align对齐方式 默认left 可选left, center, right

Events 事件

• change 用户确认选定的值时触发 (组件绑定值。格式与绑定值一致，可受 value-format 控制)
  -blur当 input 失去焦点时触发 (组件实例)
• focus 当 input 获得焦点时触发(组件实例)

Methods 方法

• focus 使 input 获取焦点

效果

16.Table 表格✨

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

使用

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

Table

Attributes 属性

• data显示的数据 类型 array数组✨
• border是否带有纵向边框 默认false
• stripe是否为斑马纹 table 默认false

Table-column

Scoped Slot 作用域插槽✨

• default 自定义列的内容，参数为 { row, column, $index }✨
• header自定义表头的内容. 参数为 { column, $index }

效果

17.Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

使用

<el-progress :percentage="50"></el-progress>

Attributes 属性

• percentage 百分比 必填✨
• type 进度条类型 默认line线 可选 line/circle/dashboard

效果

18.Card 卡片✨

将信息聚合在卡片容器中展示。
Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。

使用

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>

Attributes 属性

• header设置 header，也可以通过 slot#header 传入 DOM
• shadow设置阴影显示时机 always / hover / never (总是显示/ 鼠标悬浮时显示/从不显示)

效果