EtTable example:

- 请求接口数据，通过配置设置表格列

```vue
<template>
  <div>
    <ElForm :inline="true">
      <ElFormItem label="刷新页数">
        <ElInput v-model="pageIndex"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton icon="el-icon-refresh" @click="onRefresh">刷新列表</ElButton>
      </ElFormItem>
    </ElForm>
    <ElForm :inline="true">
      <ElFormItem>
        <ElButton @click="onClearSort">清除筛选</ElButton>
        <ElButton @click="onSetCurrentRow(1)">选中第2行</ElButton>
        <ElButton @click="onSetCurrentRow">清除选中</ElButton>
      </ElFormItem>
    </ElForm>
    <EtTable ref="table" url="//10.15.10.204:33000/mock/69/list" :immediate="false" highlight-current-row :columns="columns" :params="params" :parseResponse="parseResponse" :pagination="pagination" @fetch-end="onFetchEnd">
      <template v-slot:name-header="scope">
        scopeHeaderSlot开启，自定义内容
      </template>
      <template v-slot:name="scope">
        scopeSlot开启，自定义内容
      </template>
    </EtTable>
  </div>
</template>

<script>
import { Button, Form, FormItem } from 'element-ui'

export default {
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
    ElButton: Button
  },

  data() {
    return {
      pageIndex: 1,

      params: {
        a: 1,
        b: 'test',
        c: [1, 2, 3, 4],
        d: ['hello', 'world']
      },

      pagination: {
        pagerCount: 11,
        pageSizes: [10, 20, 30, 40, 50, 100, 200],
        layout: 'total, sizes, prev, pager, next'
      },

      columns: [
        {
          label: '头像',
          prop: 'avatar',
          contentType: 'avatar',
        },
        {
          label: '图片',
          prop: 'image',
          contentType: 'image',
        },
        {
          label: '链接',
          prop: 'link',
          contentType: 'link',
        },
        {
          label: '标签',
          prop: 'tag',
          contentType: 'tag',
        },
        {
          label: '日期',
          prop: 'date',
          headerType: 'tip',
          headerTip: '这是日期',
          formatType: 'timestamp',
        },
        {
          label: '姓名',
          prop: 'name',
          scopeHeaderSlot: true,
          scopeSlot: true,
        },
        {
          label: '地址',
          prop: 'address',
          sortable: true,
          // formatter: () => {},
          hidden: () => false
        },
        {
          label: '操作',
          width: 200,
          contentType: 'ctrl',
          ctrlList: [
            {
              type: 'primary',
              name: '编辑',
              onClick: (row, column, index) => {
                console.log('当前行数据')
                this.onPrintRowData(row)
                console.log('当前列属性，同 el-table-column 的列属性')
                console.log(column)
                console.log('当前行索引')
                console.log(index)
              }
            },
            {
              type: 'danger',
              icon: 'el-icon-delete',
            }
          ]
        },
      ],

      tableData: []
    }
  },

  methods: {
    onPrintRowData(row) {
      console.log(row)
    },
    onRefresh() {
      this.$refs.table.refresh(Number(this.pageIndex))
    },
    onFetchEnd(params) {
      console.log(params)
      this.tableData = params.data
    },
    onClearSort() {
      this.$refs.table.clearSort()
    },
    onSetCurrentRow(index) {
      if (index) {
        this.$refs.table.setCurrentRow(this.tableData[index])
      } else {
        this.$refs.table.setCurrentRow()
      }
    },
    parseResponse(response) {
      return response.data
    }
  },
}
</script>
```

- 请求接口数据，通过标签设置表格列，同 el-table 和 el-table-column 用法

```vue
<template>
  <EtTable url="//10.15.10.204:33000/mock/69/list" :parseResponse="parseResponse">
    <EtTableColumn prop="avatar" label="头像">
      <template v-slot="scope">
        <ElAvatar :src="scope.row.avatar"></ElAvatar>
      </template>
    </EtTableColumn>
    <EtTableColumn prop="link" label="链接">
      <template v-slot="scope">
        <ElLink>{{ scope.row.link }}</ElLink>
      </template>
    </EtTableColumn>
    <EtTableColumn prop="date" label="日期" :formatter="formatTimestamp"></EtTableColumn>
    <EtTableColumn prop="name" label="姓名"></EtTableColumn>
    <EtTableColumn prop="address" label="地址"></EtTableColumn>
    <EtTableColumn label="操作">
      <ElLink>编辑</ElLink>
    </EtTableColumn>
  </EtTable>
</template>

<script>
import dayjs from 'dayjs'
import { Avatar, Link } from 'element-ui'

export default {
  components: {
    'ElAvatar': Avatar,
    'ElLink': Link,
  },

  data() {
    return {}
  },

  methods: {
    formatTimestamp(row, column, value) {
      if (String(value).length === 13) {
        // 毫秒时间戳
        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      } else if (String(value).length === 10) {
        // 秒时间戳
        return dayjs.unix(value).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return '-'
      }
    },
    parseResponse(response) {
      return response.data
    }
  },
}
</script>
```

- 使用本地数据，通过标签设置表格列，同 el-table 和 el-table-column 用法

```vue
<template>
  <EtTable :localData="localData" :showPagination="false">
    <EtTableColumn prop="date" label="日期"></EtTableColumn>
    <EtTableColumn prop="name" label="姓名"></EtTableColumn>
    <EtTableColumn prop="address" label="地址"></EtTableColumn>
  </EtTable>
</template>

<script>
export default {
  onLoad() {
    setTimeout(() => [
      this.localData = [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
      ]
    ], 2000)
  },

  data() {
    return {
      localData: [
        {
          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 弄',
        },
      ],
    }
  },

  methods: {},
}
</script>
```

- 使用本地数据，通过配置设置表格列

```vue
<template>
  <EtTable :localData="localData" :columns="columns" :showPagination="false"></EtTable>
</template>

<script>
export default {
  data() {
    return {
      localData: [
        {
          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 弄',
        },
      ],
      columns: [
        {
          label: '日期',
          prop: 'date',
        },
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '地址',
          prop: 'address',
        },
      ],
    }
  },

  methods: {},
}
</script>
```