<script>
export default {
  components: {},

  data() {
    return{
        list2: {
          ip: {
            show: true,
          }
        },
        tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            tag: 'home'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            tag: 'home'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            tag: 'company'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          },{
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          }],
          status: 'nodata',
    
           tableData2: [],
            changedata: ()=>{
                console.log(1);
                this.status = 'loading';
                setTimeout(() => {
                  this.tableData2 = this.tableData;
                  this.status = 'havedata';
                  // this.list2.ip.show = false;
                }, 300)
            },
            
          
    }
  }
}
</script>

# Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。


## 基础表格
基础的表格展示用法。
:::demo 使用`f-icon`嵌入图标
````html
<efly-table :data="tableData2" :status="status" maxHeight="300px" :monitor="list2" nodataIcon="icon icon-no-data" loadingImg="'/src/assets/image/loading.gif'">
		<efly-table-column header="" width="20">
							<div class="box flex-column" slot-scope="scope">
								<efly-checkbox :active="status"
											   >
								</efly-checkbox>
							</div>
		</efly-table-column>
    <efly-table-column v-if="list2.ip.show"
        prop="name"
        header="姓名"
        width="380"
    >
    </efly-table-column>
    <efly-table-column v-if="list2.ip.show"
        prop="name"
        header="姓名"
        width="180"
    >
    </efly-table-column>
    <efly-table-column v-if="list2.ip.show"
        prop="name"
        header="姓名"
        width="480"
    >
    </efly-table-column>
    <efly-table-column v-if="list2.ip.show"
        prop="name"
        header="姓名"
        width="200"
    >
    </efly-table-column>
    <efly-table-column v-if="list2.ip.show"
        prop="name"
        header="姓名"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="date"
        header="日期"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="address"
        header="地址"
    >
    </efly-table-column>
		<p slot="nodata">暂无数据，<span class="color-primary">请前往创建</span></p>
</efly-table>
<script>
export default {
  components: {},
  data() {
    return{
        tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          }]
    }
  }
}
</script>
````
:::

## 加载中
基础的表格展示用法。
:::demo 使用`f-icon`嵌入图标
````html
<efly-table :data="tableData" :status="'loading'" loadingImg="'/src/assets/image/loading.gif'">
    <efly-table-column
        prop="name"
        header="姓名"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="date"
        header="日期"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="address"
        header="地址"
    >
    </efly-table-column>
</efly-table>
<script>
export default {
  components: {},
  data() {
    return{
        tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          }]
    }
  }
}
</script>
````
:::

## 暂无数据
基础的表格展示用法。
:::demo 使用`f-icon`嵌入图标
````html
<efly-table :data="tableData" :status="'nodata'" nodataIcon="icon-no-data" loadingImg="'/src/assets/image/loading.gif'">
    <efly-table-column
        prop="name"
        header="姓名"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="date"
        header="日期"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        prop="address"
        header="地址"
    >
    </efly-table-column>
</efly-table>
<script>
export default {
  components: {},
  data() {
    return{
        tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          }]
    }
  }
}
</script>
````
:::

## 自定义列表数据
列表数据支持自定义。
:::demo 使用`f-icon`嵌入图标
````html
<efly-table :data="tableData" :status="'havedata'" loadingImg="'/src/assets/image/loading.gif'" maxHeight="300px">
    <efly-table-column
        prop="name"
        header="姓名"
        width="180"
    >
    </efly-table-column>
    <efly-table-column
        width="180"
    >
        <efly-popover slot="header" top="32px">
            <div class="pad-default" style="width: 400px">
                <p>标题</p>
                <p>这是一段内容,这是一段内容,这是一段内容,这是一段内容。</p>
            </div>
            <div slot="reference">
                日期
                <i class="icon icon-down2"></i>
            </div>
        </efly-popover>
        <div slot-scope="scope">
            {{scope.data.date}}
        </div>
    </efly-table-column>
    <efly-table-column>
        <div slot="header">地址</div>
        <div slot-scope="scope">
            {{scope.data.address}}
        </div>
    </efly-table-column>
    <efly-table-column>
        <div slot="header">标签</div>
        <div slot-scope="scope">
            <efly-button class="btn-primary">{{scope.data.tag === 'home' ? '家' : '公司'}}</efly-button>
        </div>
    </efly-table-column>
    <efly-table-column header="操作" width="180">
        <div class="efly-table-opt-button-group" slot-scope="scope">
            <efly-button size="xsmall">管理</efly-button>
            <efly-more-operate  @select="operateSelect($event)">
                <efly-button size="xsmall">操作</efly-button>
                <efly-more-operate-group class="efly-more-operate-group-right" slot="group" top="100%" left="-40px">
                    <efly-more-operate-item :disabled="true" msg="项目一已禁用">
                        <i class="icon icon-create"></i>
                        <span>项目一</span>
                    </efly-more-operate-item>
                    <efly-more-operate-item :disabled="true" msg="禁用">
                        <i class="icon icon-create"></i>
                        <span>项目二</span>
                    </efly-more-operate-item>
                    <efly-more-operate-item>
                        <i class="icon icon-create"></i>
                        <span>项目三</span>
                        <efly-more-operate-group slot="group" left="-120px" top="-1px">
                            <efly-more-operate-item :disabled="true" msg="子项目一已禁用">
                                <i class="icon icon-create"></i>
                                <span>子项目一</span>
                            </efly-more-operate-item>
                            <efly-more-operate-item operate="son2">
                                <i class="icon icon-create"></i>
                                <span>子项目二</span>
                            </efly-more-operate-item>
                        </efly-more-operate-group>
                    </efly-more-operate-item>
                </efly-more-operate-group>
            </efly-more-operate>
        </div>
    </efly-table-column>
</efly-table>
<script>
export default {
  components: {},
  data() {
    return{
        tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            tag: 'home'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            tag: 'home'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            tag: 'company'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            tag: 'company'
          }]
    }
  }
}
</script>
````
:::

## 参数说明
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| data     | 数据   | Array  |     —        |    —     |
| status     | 状态   | String  |  loading/havedata/nodata             |    loading    |
| monitor     | 监听数据   | Any  |  —             |    —    |
| loadingImg     | 加载图片   | String  |  —             |    —    |
| nodataIcon     | 无数据icon | String  |  —             |    —    |
| maxHeight     | 最高高度 | String  |  —             |    unset    |

## scope数据

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| data     | 行数据   | String  |     —        |    —     |
| index    | 行下标   | Number  |     —        |    —     |


