From ceae92fe7cb552902d070e61333fd86c510ff191 Mon Sep 17 00:00:00 2001
From: zazzaz <izazzaz@hotmail.com>
Date: Tue, 20 Oct 2020 11:47:02 +0800
Subject: [PATCH] fix: fix table tooltip (#438)

---
 .gitignore                             |   2 +-
 packages/table/doc/basic.vue           |  46 ---------
 packages/table/doc/border.vue          |  70 -------------
 packages/table/doc/diyHeader.vue       |  58 -----------
 packages/table/doc/diyIndex.vue        |  60 -----------
 packages/table/doc/diyTemplate.vue     |  81 ---------------
 packages/table/doc/expandRow.vue       | 108 --------------------
 packages/table/doc/filter.vue          |  89 ----------------
 packages/table/doc/fixedCol.vue        |  71 -------------
 packages/table/doc/fixedColRow.vue     |  85 ----------------
 packages/table/doc/fixedHeader.vue     |  95 -----------------
 packages/table/doc/footerCount.vue     | 104 -------------------
 packages/table/doc/index.stories.ts    |  24 -----
 packages/table/doc/maxHeight.vue       |  94 -----------------
 packages/table/doc/mergeRowCol.vue     | 103 -------------------
 packages/table/doc/mulCheck.vue        |  90 -----------------
 packages/table/doc/mulHeader.vue       |  82 ---------------
 packages/table/doc/rowClassName.vue    |  61 -----------
 packages/table/doc/singleSelect.vue    |  62 ------------
 packages/table/doc/sort.vue            |  68 -------------
 packages/table/doc/stripe.vue          |  60 -----------
 packages/table/doc/treeTable.vue       | 135 -------------------------
 packages/table/src/table-body/index.ts |  40 ++++----
 website/play/.gitkeep                  |   0
 website/play/index.vue                 |  13 ---
 25 files changed, 21 insertions(+), 1680 deletions(-)
 delete mode 100644 packages/table/doc/basic.vue
 delete mode 100644 packages/table/doc/border.vue
 delete mode 100644 packages/table/doc/diyHeader.vue
 delete mode 100644 packages/table/doc/diyIndex.vue
 delete mode 100644 packages/table/doc/diyTemplate.vue
 delete mode 100644 packages/table/doc/expandRow.vue
 delete mode 100644 packages/table/doc/filter.vue
 delete mode 100644 packages/table/doc/fixedCol.vue
 delete mode 100644 packages/table/doc/fixedColRow.vue
 delete mode 100644 packages/table/doc/fixedHeader.vue
 delete mode 100644 packages/table/doc/footerCount.vue
 delete mode 100644 packages/table/doc/index.stories.ts
 delete mode 100644 packages/table/doc/maxHeight.vue
 delete mode 100644 packages/table/doc/mergeRowCol.vue
 delete mode 100644 packages/table/doc/mulCheck.vue
 delete mode 100644 packages/table/doc/mulHeader.vue
 delete mode 100644 packages/table/doc/rowClassName.vue
 delete mode 100644 packages/table/doc/singleSelect.vue
 delete mode 100644 packages/table/doc/sort.vue
 delete mode 100644 packages/table/doc/stripe.vue
 delete mode 100644 packages/table/doc/treeTable.vue
 create mode 100644 website/play/.gitkeep
 delete mode 100644 website/play/index.vue

diff --git a/.gitignore b/.gitignore
index 89dea5a88d..4b1dbd80cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,4 @@ storybook-static
 coverage/
 website-dist
 lib
-website/play/
+website/play/index.vue
diff --git a/packages/table/doc/basic.vue b/packages/table/doc/basic.vue
deleted file mode 100644
index b4946e9725..0000000000
--- a/packages/table/doc/basic.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div class="block">
-    <h3>基础表格</h3>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column label="序号" type="index" width="80" />
-      <el-table-column label="日期" prop="date" width="180" />
-      <el-table-column label="姓名" prop="name" width="180" />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-
-<script lang='ts'>
-export default {
-  setup() {
-    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>
-
-<style scoped>
-</style>
-
diff --git a/packages/table/doc/border.vue b/packages/table/doc/border.vue
deleted file mode 100644
index 3ac367f8ed..0000000000
--- a/packages/table/doc/border.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="block">
-    <h3>带边框表格</h3>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column
-        label="日期"
-        prop="date"
-        show-overflow-tooltip
-        width="180"
-      />
-      <el-table-column
-        label="姓名"
-        prop="name"
-        show-overflow-tooltip
-        width="80"
-      />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-
-<script lang='ts'>
-export default {
-  setup() {
-    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 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-      ],
-    }
-  },
-}
-</script>
-
-<style scoped>
-</style>
-
diff --git a/packages/table/doc/diyHeader.vue b/packages/table/doc/diyHeader.vue
deleted file mode 100644
index 5f9eafd0c6..0000000000
--- a/packages/table/doc/diyHeader.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <h3>自定义表头</h3>
-  <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
-    <el-table-column label="Date" prop="date" />
-    <el-table-column label="Name" prop="name" />
-    <el-table-column align="right">
-      <template #header>
-        <el-input v-model="search" placeholder="输入关键字搜索" size="mini" />
-      </template>
-      <template #default="scope">
-        <el-button size="mini" type @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
-        <el-button size="mini" type @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  setup() {
-    const handleEdit = (index, row) => {
-      console.log(index, row)
-    }
-    const handleDelete = (index, row) => {
-      console.log(index, row)
-    }
-    const search = ref('')
-    return {
-      handleEdit,
-      handleDelete,
-      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 弄',
-        },
-      ],
-      search,
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/diyIndex.vue b/packages/table/doc/diyIndex.vue
deleted file mode 100644
index 50d8ff3d83..0000000000
--- a/packages/table/doc/diyIndex.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <h3>自定义索引</h3>
-  <el-table :data="tableData" style="width: 100%">
-    <el-table-column :index="indexMethod" type="index" />
-    <el-table-column label="日期" prop="date" width="180" />
-    <el-table-column label="姓名" prop="name" width="180" />
-    <el-table-column label="地址" prop="address" />
-  </el-table>
-</template>
-
-<script>
-export default {
-  setup() {
-    const indexMethod = index => {
-      return index * 2
-    }
-    return {
-      indexMethod,
-      tableData: [
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '家',
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1517 弄',
-          zip: 200333,
-          tag: '公司',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1519 弄',
-          zip: 200333,
-          tag: '家',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1516 弄',
-          zip: 200333,
-          tag: '公司',
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/diyTemplate.vue b/packages/table/doc/diyTemplate.vue
deleted file mode 100644
index 48c5c8fbc8..0000000000
--- a/packages/table/doc/diyTemplate.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <h3>自定义列模板</h3>
-  <el-table :data="tableData" style="width: 100%">
-    <el-table-column label="日期" width="180">
-      <template #default="scope">
-        <i class="el-icon-time"></i>
-        <span style="margin-left: 10px">{{ scope.row.date }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column label="姓名" width="180">
-      <template #default="scope">
-        <el-popper effect="light" placement="top" trigger="hover">
-          <template #default>
-            <p>姓名: {{ scope.row.name }}</p>
-            <p>住址: {{ scope.row.address }}</p>
-          </template>
-          <template #trigger>
-            <div class="name-wrapper">
-              <el-tag size="medium">{{ scope.row.name }}</el-tag>
-            </div>
-          </template>
-        </el-popper>
-      </template>
-    </el-table-column>
-    <el-table-column label="操作">
-      <template #default="scope">
-        <el-button size="mini" type @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { Popper as ElPopper } from '@element-plus/popper'
-export default {
-  components: {
-    ElPopper,
-  },
-  setup() {
-    const handleEdit = (index, row) => {
-      console.log(index, row)
-    }
-    const handleDelete = (index, row) => {
-      console.log(index, row)
-    }
-    return {
-      handleEdit,
-      handleDelete,
-      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>
-
-<style scoped>
-  .name-wrapper {
-    display: inline-block;
-  }
-</style>
diff --git a/packages/table/doc/expandRow.vue b/packages/table/doc/expandRow.vue
deleted file mode 100644
index be4a6121b5..0000000000
--- a/packages/table/doc/expandRow.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <h3>展开行</h3>
-  <el-button type @click="toggleRowExpansion">切换某一行的展开状态</el-button>
-  <el-table ref="table" :data="tableData" style="width: 100%">
-    <el-table-column type="expand">
-      <template #default="props">
-        <div class="expand-table-demo">
-          <div>
-            <label>商品名称</label>
-            <span>{{ props.row.name }}</span>
-          </div>
-          <div>
-            <label>所属店铺</label>
-            <span>{{ props.row.shop }}</span>
-          </div>
-          <div>
-            <label>商品 ID</label>
-            <span>{{ props.row.id }}</span>
-          </div>
-          <div>
-            <label>店铺 ID</label>
-            <span>{{ props.row.shopId }}</span>
-          </div>
-          <div>
-            <label>商品分类</label>
-            <span>{{ props.row.category }}</span>
-          </div>
-          <div>
-            <label>店铺地址</label>
-            <span>{{ props.row.address }}</span>
-          </div>
-          <div>
-            <label>商品描述</label>
-            <span>{{ props.row.desc }}</span>
-          </div>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column label="商品 ID" prop="id" />
-    <el-table-column label="商品名称" prop="name" />
-    <el-table-column label="描述" prop="desc" />
-  </el-table>
-</template>
-
-<script>
-import { getCurrentInstance, ref } from 'vue'
-export default {
-  setup() {
-    const instance = getCurrentInstance()
-    const tableData = ref([
-      {
-        id: '12987122',
-        name: '好滋好味鸡蛋仔',
-        category: '江浙小吃、小吃零食',
-        desc: '荷兰优质淡奶，奶香浓而不腻',
-        address: '上海市普陀区真北路',
-        shop: '王小虎夫妻店',
-        shopId: '10333',
-      },
-      {
-        id: '12987123',
-        name: '好滋好味鸡蛋仔',
-        category: '江浙小吃、小吃零食',
-        desc: '荷兰优质淡奶，奶香浓而不腻',
-        address: '上海市普陀区真北路',
-        shop: '王小虎夫妻店',
-        shopId: '10333',
-      },
-      {
-        id: '12987125',
-        name: '好滋好味鸡蛋仔',
-        category: '江浙小吃、小吃零食',
-        desc: '荷兰优质淡奶，奶香浓而不腻',
-        address: '上海市普陀区真北路',
-        shop: '王小虎夫妻店',
-        shopId: '10333',
-      },
-      {
-        id: '12987126',
-        name: '好滋好味鸡蛋仔',
-        category: '江浙小吃、小吃零食',
-        desc: '荷兰优质淡奶，奶香浓而不腻',
-        address: '上海市普陀区真北路',
-        shop: '王小虎夫妻店',
-        shopId: '10333',
-      },
-    ])
-    const toggleRowExpansion = () => {
-      instance.refs.table.toggleRowExpansion(tableData.value[0])
-    }
-    return {
-      toggleRowExpansion,
-      tableData,
-    }
-  },
-}
-</script>
-
-<style scoped>
-  .expand-table-demo > div > label {
-    width: 90px;
-    color: #99a9bf;
-    display: inline-block;
-  }
-  .expand-table-demo > div {
-    margin: 10px 0;
-  }
-</style>
diff --git a/packages/table/doc/filter.vue b/packages/table/doc/filter.vue
deleted file mode 100644
index 0c425f50b7..0000000000
--- a/packages/table/doc/filter.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <h3>过滤</h3>
-  <el-button type @click="resetDateFilter">清除日期过滤器</el-button>
-  <el-button type @click="clearFilter">清除所有过滤器</el-button>
-  <el-table ref="filterTable" :data="tableData" style="width: 100%">
-    <el-table-column
-      :filter-method="filterHandler"
-      :filter-multiple="false"
-      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
-      column-key="date"
-      label="日期"
-      prop="date"
-      sortable
-      width="180"
-    />
-    <el-table-column label="姓名" prop="name" width="180" />
-    <el-table-column :formatter="formatter" label="地址" prop="address" />
-    <el-table-column
-      :filter-method="filterTag"
-      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
-      filter-placement="bottom-start"
-      label="标签"
-      prop="tag"
-      width="100"
-    >
-      <template #default="scope">
-        <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { getCurrentInstance } from 'vue'
-export default {
-  setup() {
-    const instance = getCurrentInstance()
-    const resetDateFilter = () => {
-      instance.refs.filterTable.clearFilter('date')
-    }
-    const clearFilter = () => {
-      instance.refs.filterTable.clearFilter()
-    }
-    const formatter = row => {
-      return row.address + '---'
-    }
-    const filterTag = (value, row) => {
-      return row.tag === value
-    }
-    const filterHandler = (value, row, column) => {
-      const property = column['property']
-      return row[property] === value
-    }
-    return {
-      tableData: [
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          tag: '家',
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄',
-          tag: '公司',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          tag: '家',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-          tag: '公司',
-        },
-      ],
-      resetDateFilter,
-      clearFilter,
-      formatter,
-      filterTag,
-      filterHandler,
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/fixedCol.vue b/packages/table/doc/fixedCol.vue
deleted file mode 100644
index 001b0140e6..0000000000
--- a/packages/table/doc/fixedCol.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="block">
-    <h3>固定列</h3>
-    <el-table :data="tableData" border style="width: 500px">
-      <el-table-column
-        fixed
-        label="日期"
-        prop="date"
-        width="150"
-      />
-      <el-table-column label="姓名" prop="name" width="120" />
-      <el-table-column label="省份" prop="province" width="120" />
-      <el-table-column label="市区" prop="city" width="120" />
-      <el-table-column label="地址" prop="address" width="300" />
-      <el-table-column label="邮编" prop="zip" width="120" />
-      <el-table-column fixed="right" label="操作" width="100">
-        <template #default="scope">
-          <el-button size="small" type="text" @click="handleClick(scope.row)">查看</el-button>
-          <el-button size="small" type="text">编辑</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    const handleClick = row => {
-      console.log(row)
-    }
-    return {
-      handleClick,
-      tableData: [
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1517 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1519 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1516 弄',
-          zip: 200333,
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/fixedColRow.vue b/packages/table/doc/fixedColRow.vue
deleted file mode 100644
index 08fe126a61..0000000000
--- a/packages/table/doc/fixedColRow.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="block" style="width: 500px">
-    <h3>固定列和表头</h3>
-    <el-table :data="tableData" height="250" style="width: 100%">
-      <el-table-column
-        fixed
-        label="日期"
-        prop="date"
-        width="150"
-      />
-      <el-table-column label="姓名" prop="name" width="120" />
-      <el-table-column label="省份" prop="province" width="120" />
-      <el-table-column label="市区" prop="city" width="120" />
-      <el-table-column label="地址" prop="address" width="300" />
-      <el-table-column label="邮编" prop="zip" width="120" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    return {
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/fixedHeader.vue b/packages/table/doc/fixedHeader.vue
deleted file mode 100644
index 4e77acf01b..0000000000
--- a/packages/table/doc/fixedHeader.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="block">
-    <h3>固定表头</h3>
-    <el-table
-      :data="tableData"
-      border
-      height="250"
-      style="width: 100%"
-    >
-      <el-table-column label="日期" prop="date" width="180" />
-      <el-table-column label="姓名" prop="name" width="180" />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-
-<script lang='ts'>
-export default {
-  setup() {
-    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 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-      ],
-    }
-  },
-}
-</script>
-
-<style scoped>
-</style>
-
diff --git a/packages/table/doc/footerCount.vue b/packages/table/doc/footerCount.vue
deleted file mode 100644
index 32bc4a3846..0000000000
--- a/packages/table/doc/footerCount.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <h3>表尾合计行</h3>
-  <el-table
-    :data="tableData"
-    border
-    show-summary
-    style="width: 100%"
-  >
-    <el-table-column label="ID" prop="id" width="180" />
-    <el-table-column label="姓名" prop="name" />
-    <el-table-column label="数值 1" prop="amount1" sortable />
-    <el-table-column label="数值 2" prop="amount2" sortable />
-    <el-table-column label="数值 3" prop="amount3" sortable />
-  </el-table>
-
-  <el-table
-    :data="tableData"
-    :summary-method="getSummaries"
-    border
-    height="200"
-    show-summary
-    style="width: 100%; margin-top: 20px"
-    sum-text="123"
-  >
-    <el-table-column label="ID" prop="id" width="180" />
-    <el-table-column label="姓名" prop="name" />
-    <el-table-column label="数值 1（元）" prop="amount1" />
-    <el-table-column label="数值 2（元）" prop="amount2" />
-    <el-table-column label="数值 3（元）" prop="amount3" />
-  </el-table>
-</template>
-
-<script>
-export default {
-  setup() {
-    const getSummaries = param => {
-      const { columns, data } = param
-      const sums = []
-      columns.forEach((column, index) => {
-        if (index === 0) {
-          sums[index] = '总价'
-          return
-        }
-        const values = data.map(item => Number(item[column.property]))
-        if (!values.every(value => isNaN(value))) {
-          sums[index] = values.reduce((prev, curr) => {
-            const value = Number(curr)
-            if (!isNaN(value)) {
-              return prev + curr
-            } else {
-              return prev
-            }
-          }, 0)
-          sums[index] += ' 元'
-        } else {
-          sums[index] = 'N/A'
-        }
-      })
-
-      return sums
-    }
-    return {
-      getSummaries,
-      tableData: [
-        {
-          id: '12987122',
-          name: '王小虎',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10,
-        },
-        {
-          id: '12987123',
-          name: '王小虎',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12,
-        },
-        {
-          id: '12987124',
-          name: '王小虎',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9,
-        },
-        {
-          id: '12987125',
-          name: '王小虎',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17,
-        },
-        {
-          id: '12987126',
-          name: '王小虎',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15,
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/index.stories.ts b/packages/table/doc/index.stories.ts
deleted file mode 100644
index cdf6715202..0000000000
--- a/packages/table/doc/index.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export { default as BasicUsage } from './basic.vue'
-export { default as Border } from './border.vue'
-export { default as Stripe } from './stripe.vue'
-export { default as RowClassName } from './rowClassName.vue'
-export { default as FixHeader } from './fixedHeader.vue'
-export { default as FixCol } from './fixedCol.vue'
-export { default as FixColRow } from './fixedColRow.vue'
-export { default as MaxHeight } from './maxHeight.vue'
-export { default as MulHeader } from './mulHeader.vue'
-export { default as SingleSelect } from './singleSelect.vue'
-export { default as MulCheck } from './mulCheck.vue'
-export { default as Sort } from './sort.vue'
-export { default as Filter } from './filter.vue'
-export { default as DiyTemplate } from './diyTemplate.vue'
-export { default as ExpandRow } from './expandRow.vue'
-export { default as TreeTable } from './treeTable.vue'
-export { default as DiyHeader } from './diyHeader.vue'
-export { default as FooterCount } from './footerCount.vue'
-export { default as MergeRowCol } from './mergeRowCol.vue'
-export { default as DiyIndex } from './diyIndex.vue'
-
-export default {
-  title: 'Table',
-}
diff --git a/packages/table/doc/maxHeight.vue b/packages/table/doc/maxHeight.vue
deleted file mode 100644
index e85eecc8f8..0000000000
--- a/packages/table/doc/maxHeight.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <h3>流体高度</h3>
-  <el-table :data="tableData" max-height="250" style="width: 700px">
-    <el-table-column
-      fixed
-      label="日期"
-      prop="date"
-      width="150"
-    />
-    <el-table-column label="姓名" prop="name" width="120" />
-    <el-table-column label="省份" prop="province" width="120" />
-    <el-table-column label="市区" prop="city" width="120" />
-    <el-table-column label="地址" prop="address" width="300" />
-    <el-table-column label="邮编" prop="zip" width="120" />
-    <el-table-column fixed="right" label="操作" width="120">
-      <template #default="scope">
-        <el-button size="small" type="text" @click.prevent="deleteRow(scope.$index)">移除</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  setup() {
-    const tableData = ref([
-      {
-        date: '2016-05-03',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-02',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-04',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-01',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-08',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-06',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-      {
-        date: '2016-05-07',
-        name: '王小虎',
-        province: '上海',
-        city: '普陀区',
-        address: '上海市普陀区金沙江路 1518 弄',
-        zip: 200333,
-      },
-    ])
-    const deleteRow = index => {
-      tableData.value.splice(index, 1)
-    }
-    return {
-      deleteRow,
-      tableData,
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/mergeRowCol.vue b/packages/table/doc/mergeRowCol.vue
deleted file mode 100644
index 11b0de17ab..0000000000
--- a/packages/table/doc/mergeRowCol.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div>
-    <h3>合并行或列</h3>
-    <el-table
-      :data="tableData"
-      :span-method="arraySpanMethod"
-      border
-      style="width: 100%"
-    >
-      <el-table-column label="ID" prop="id" width="180" />
-      <el-table-column label="姓名" prop="name" />
-      <el-table-column label="数值 1" prop="amount1" sortable />
-      <el-table-column label="数值 2" prop="amount2" sortable />
-      <el-table-column label="数值 3" prop="amount3" sortable />
-    </el-table>
-
-    <el-table
-      :data="tableData"
-      :span-method="objectSpanMethod"
-      border
-      style="width: 100%; margin-top: 20px"
-    >
-      <el-table-column label="ID" prop="id" width="180" />
-      <el-table-column label="姓名" prop="name" />
-      <el-table-column label="数值 1（元）" prop="amount1" />
-      <el-table-column label="数值 2（元）" prop="amount2" />
-      <el-table-column label="数值 3（元）" prop="amount3" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    const arraySpanMethod = ({ rowIndex, columnIndex }) => {
-      if (rowIndex % 2 === 0) {
-        if (columnIndex === 0) {
-          return [1, 2]
-        } else if (columnIndex === 1) {
-          return [0, 0]
-        }
-      }
-    }
-
-    const objectSpanMethod = ({ rowIndex, columnIndex }) => {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1,
-          }
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0,
-          }
-        }
-      }
-    }
-    return {
-      arraySpanMethod,
-      objectSpanMethod,
-      tableData: [
-        {
-          id: '12987122',
-          name: '王小虎',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10,
-        },
-        {
-          id: '12987123',
-          name: '王小虎',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12,
-        },
-        {
-          id: '12987124',
-          name: '王小虎',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9,
-        },
-        {
-          id: '12987125',
-          name: '王小虎',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17,
-        },
-        {
-          id: '12987126',
-          name: '王小虎',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15,
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/mulCheck.vue b/packages/table/doc/mulCheck.vue
deleted file mode 100644
index 9fd164123c..0000000000
--- a/packages/table/doc/mulCheck.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <h3>多选</h3>
-  <el-table
-    ref="multipleTable"
-    :data="tableData"
-    style="width: 100%"
-    tooltip-effect="dark"
-    @selection-change="handleSelectionChange"
-  >
-    <el-table-column type="selection" width="55" />
-    <el-table-column label="日期" width="120">
-      <template #default="scope">{{ scope.row.date }}</template>
-    </el-table-column>
-    <el-table-column label="姓名" prop="name" width="120" />
-    <el-table-column label="地址" prop="address" />
-  </el-table>
-  <div style="margin-top: 20px">
-    <el-button type @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
-    <el-button type @click="toggleAllSelection()">切换所有行选中状态</el-button>
-    <el-button type @click="toggleSelection()">取消选择</el-button>
-  </div>
-</template>
-
-<script>
-import { ref, getCurrentInstance } from 'vue'
-export default {
-  setup() {
-    const multipleSelection = ref([])
-    const instance = getCurrentInstance()
-    const toggleSelection = rows => {
-      if (rows) {
-        rows.forEach(row => {
-          instance.refs.multipleTable.toggleRowSelection(row)
-        })
-      } else {
-        instance.refs.multipleTable.clearSelection()
-      }
-    }
-    const handleSelectionChange = val => {
-      multipleSelection.value = val
-    }
-    const toggleAllSelection = () => {
-      instance.refs.multipleTable.toggleAllSelection()
-    }
-    return {
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-08',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-06',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          date: '2016-05-07',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-      ],
-      multipleSelection,
-      toggleSelection,
-      handleSelectionChange,
-      toggleAllSelection,
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/mulHeader.vue b/packages/table/doc/mulHeader.vue
deleted file mode 100644
index 966ea9fafe..0000000000
--- a/packages/table/doc/mulHeader.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <h3>多级表头</h3>
-  <el-table :data="tableData" border style="width: 100%">
-    <el-table-column label="日期" prop="date" width="150" />
-    <el-table-column label="配送信息">
-      <el-table-column label="姓名" prop="name" width="120" />
-      <el-table-column label="地址">
-        <el-table-column label="省份" prop="province" width="120" />
-        <el-table-column label="市区" prop="city" width="120" />
-        <el-table-column label="地址" prop="address" width="300" />
-        <el-table-column label="邮编" prop="zip" width="120" />
-      </el-table-column>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-export default {
-  setup() {
-    return {
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        // {
-        //   date: '2016-05-04',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // },
-        // {
-        //   date: '2016-05-01',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // },
-        // {
-        //   date: '2016-05-08',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // },
-        // {
-        //   date: '2016-05-06',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // },
-        // {
-        //   date: '2016-05-07',
-        //   name: '王小虎',
-        //   province: '上海',
-        //   city: '普陀区',
-        //   address: '上海市普陀区金沙江路 1518 弄',
-        //   zip: 200333
-        // }
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/rowClassName.vue b/packages/table/doc/rowClassName.vue
deleted file mode 100644
index 9ebeae32bc..0000000000
--- a/packages/table/doc/rowClassName.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="block">
-    <h3>带状态表格</h3>
-    <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%">
-      <el-table-column label="日期" prop="date" width="180" />
-      <el-table-column label="姓名" prop="name" width="180" />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-
-<script lang='ts'>
-export default {
-  setup() {
-    const tableRowClassName = ({ rowIndex }) => {
-      if (rowIndex === 1) {
-        return 'warning-row'
-      } else if (rowIndex === 3) {
-        return 'success-row'
-      }
-      return ''
-    }
-    return {
-      tableRowClassName,
-      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>
-
-<style>
-  .el-table .warning-row {
-    background: oldlace;
-  }
-
-  .el-table .success-row {
-    background: #f0f9eb;
-  }
-</style>
-
diff --git a/packages/table/doc/singleSelect.vue b/packages/table/doc/singleSelect.vue
deleted file mode 100644
index b0ea72c0f4..0000000000
--- a/packages/table/doc/singleSelect.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <h3>单选</h3>
-  <el-table
-    ref="singleTable"
-    :data="tableData"
-    highlight-current-row
-    style="width: 100%"
-    @current-change="handleCurrentChange"
-  >
-    <el-table-column type="index" width="50" />
-    <el-table-column label="日期" property="date" width="120" />
-    <el-table-column label="姓名" property="name" width="120" />
-    <el-table-column label="地址" property="address" />
-  </el-table>
-  <div style="margin-top: 20px">
-    <el-button type @click="setCurrent(tableData[1])">选中第二行</el-button>
-    <el-button type @click="setCurrent()">取消选择</el-button>
-  </div>
-</template>
-
-<script>
-import { ref, getCurrentInstance } from 'vue'
-export default {
-  setup() {
-    const currentRow = ref(null)
-    const instance = getCurrentInstance()
-    const setCurrent = row => {
-      instance.refs.singleTable.setCurrentRow(row)
-    }
-    const handleCurrentChange = val => {
-      currentRow.value = val
-    }
-    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 弄',
-        },
-      ],
-      currentRow,
-      setCurrent,
-      handleCurrentChange,
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/sort.vue b/packages/table/doc/sort.vue
deleted file mode 100644
index 41541e99d8..0000000000
--- a/packages/table/doc/sort.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <h3>排序</h3>
-  <el-button type @click="clearSort">清空排序</el-button>
-  <el-button type @click="sort">手动为日期排序</el-button>
-  <el-table
-    ref="table"
-    :data="tableData"
-    :default-sort="{prop: 'date', order: 'descending'}"
-    style="width: 100%"
-  >
-    <el-table-column
-      label="日期"
-      prop="date"
-      sortable
-      width="180"
-    />
-    <el-table-column
-      label="姓名"
-      prop="name"
-      sortable
-      width="180"
-    />
-    <el-table-column :formatter="formatter" label="地址" prop="address" />
-  </el-table>
-</template>
-
-<script>
-import { getCurrentInstance } from 'vue'
-export default {
-  setup() {
-    const instance = getCurrentInstance()
-    const formatter = row => {
-      return row.address
-    }
-    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 弄',
-        },
-      ],
-      formatter,
-      clearSort: () => {
-        instance.refs.table.clearSort()
-      },
-      sort: () => {
-        instance.refs.table.sort('date', 'ascending')
-      },
-    }
-  },
-}
-</script>
diff --git a/packages/table/doc/stripe.vue b/packages/table/doc/stripe.vue
deleted file mode 100644
index 6f79c2ff07..0000000000
--- a/packages/table/doc/stripe.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="block">
-    <h3>带斑马纹表格</h3>
-    <el-table :data="tableData" stripe style="width: 100%">
-      <el-table-column label="日期" prop="date" width="180" />
-      <el-table-column label="姓名" prop="name" width="180" />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-
-<script lang='ts'>
-export default {
-  setup() {
-    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 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-        },
-      ],
-    }
-  },
-}
-</script>
-
-<style scoped>
-</style>
-
diff --git a/packages/table/doc/treeTable.vue b/packages/table/doc/treeTable.vue
deleted file mode 100644
index cd8704a4f5..0000000000
--- a/packages/table/doc/treeTable.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <h3>树形数据与懒加载</h3>
-  <div>
-    <el-table
-      :data="tableData"
-      :expand-row-keys="['3']"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      border
-      row-key="id"
-      style="width: 100%;margin-bottom: 20px;"
-    >
-      <el-table-column
-        label="日期"
-        prop="date"
-        sortable
-        width="180"
-      />
-      <el-table-column
-        label="姓名"
-        prop="name"
-        sortable
-        width="180"
-      />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-
-    <el-table
-      :data="tableData1"
-      :load="load"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      border
-      lazy
-      row-key="id"
-      style="width: 100%"
-    >
-      <el-table-column label="日期" prop="date" width="180" />
-      <el-table-column label="姓名" prop="name" width="180" />
-      <el-table-column label="地址" prop="address" />
-    </el-table>
-  </div>
-</template>
-<script>
-export default {
-  setup() {
-    const load = (tree, treeNode, resolve) => {
-      setTimeout(() => {
-        resolve([
-          {
-            id: 31,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄',
-          },
-          {
-            id: 32,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄',
-          },
-        ])
-      }, 1000)
-    }
-    return {
-      load,
-      tableData: [
-        {
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄',
-        },
-        {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          children: [
-            {
-              id: 31,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄',
-            },
-            {
-              id: 32,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄',
-            },
-          ],
-        },
-        {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-      ],
-      tableData1: [
-        {
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        },
-        {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄',
-        },
-        {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          hasChildren: true,
-        },
-        {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/packages/table/src/table-body/index.ts b/packages/table/src/table-body/index.ts
index 190d1b2e7c..dca0c3e5df 100644
--- a/packages/table/src/table-body/index.ts
+++ b/packages/table/src/table-body/index.ts
@@ -1,12 +1,12 @@
-import { defineComponent, getCurrentInstance, h, watch, PropType } from 'vue'
-import useLayoutObserver from '../layout-observer'
-import { removeClass, addClass } from '@element-plus/utils/dom'
+import ElTooltip from '@element-plus/tooltip/src/index'
+import { addClass, removeClass } from '@element-plus/utils/dom'
 import isServer from '@element-plus/utils/isServer'
-// import ElTooltip from '@element-plus/tooltip/src/index'
-import { Table, Store } from '../table'
-import { TableBodyProps } from './table-body'
-import useRender from './render-helper'
+import { defineComponent, getCurrentInstance, h, PropType, watch } from 'vue'
 import { hColgroup } from '../h-helper'
+import useLayoutObserver from '../layout-observer'
+import { Store, Table } from '../table'
+import useRender from './render-helper'
+import { TableBodyProps } from './table-body'
 export default defineComponent({
   name: 'ElTableBody',
   props: {
@@ -86,19 +86,19 @@ export default defineComponent({
           data.reduce((acc, row) => {
             return acc.concat(this.wrappedRowRender(row, acc.length))
           }, []),
-          // h(
-          //   ElTooltip,
-          //   {
-          //     modelValue: this.tooltipVisible,
-          //     content: this.tooltipContent,
-          //     manual: true,
-          //     effect: this.$parent.tooltipEffect,
-          //     placement: 'top',
-          //   },
-          //   {
-          //     default: () => this.tooltipTrigger,
-          //   },
-          // ),
+          h(
+            ElTooltip,
+            {
+              modelValue: this.tooltipVisible,
+              content: this.tooltipContent,
+              manual: true,
+              effect: this.$parent.tooltipEffect,
+              placement: 'top',
+            },
+            {
+              default: () => this.tooltipTrigger,
+            },
+          ),
         ]),
       ],
     )
diff --git a/website/play/.gitkeep b/website/play/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/website/play/index.vue b/website/play/index.vue
deleted file mode 100644
index 0135a917b6..0000000000
--- a/website/play/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <el-popper content="test">
-    <template #trigger >
-      <el-button>
-        I am trigger
-      </el-button>
-    </template>
-  </el-popper>
-</template>
-
-<script>
-export default {}
-</script>