ElemenUi简单使用

一、表格行展示

el-table是通过

 <el-table
      :data="tableData"
 >
 	 <el-table-column label="商品 ID" prop="id"></el-table-column>
	 <el-table-column label="商品名称" prop="name"></el-table-column>
	 <el-table-column label="描述" prop="desc"></el-table-column>
 <el-table />

其中data绑定表格的数据源

	<el-table-column label="商品 ID" prop="id"></el-table-column>

此处绑定的为表格的列。且默认没有内容，其内部预留了插槽，必须要通过插槽来设置内容。并且配合插槽作用域***，来使插槽可以访问子组件*中的数据。

基于插槽显示每列的数据，

  //旧版本写法
  <el-table-column type="expand">
        <template slot-scope="props">
              <span>{{ props.row.desc }}</span>
        </template>
   </el-table-column>
   
   //新版本写法
  		<template v-slot:default="props">
              <span>{{ props.row.desc }}</span>
        </template>

可以通过在列上添加属性 ： type=“expand” ，进行行扩展，默认每行都会扩展。（即可以展示未在该行列下展示的数据）

其中template中的 slot-scope 传递的是 data 数据源中的部分，会和为展开的行 共用 一行 。

二、表格的筛选