mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix table tooltip (#438)

Browse Source
This commit is contained in:
zazzaz 2020-10-20 11:47:02 +08:00 committed by GitHub
parent e8c162ea72
commit ceae92fe7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 21 additions and 1680 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,4 +12,4 @@ storybook-static
coverage/
website-dist
lib
website/play/
website/play/index.vue

46
packages/table/doc/basic.vue
View File

@ -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>

70
packages/table/doc/border.vue
View File

@ -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>

58
packages/table/doc/diyHeader.vue
View File

@ -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>

60
packages/table/doc/diyIndex.vue
View File

@ -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>

81
packages/table/doc/diyTemplate.vue
View File

@ -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>

108
packages/table/doc/expandRow.vue
View File

@ -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>

89
packages/table/doc/filter.vue
View File

@ -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>

71
packages/table/doc/fixedCol.vue
View File

@ -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>

85
packages/table/doc/fixedColRow.vue
View File

@ -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>

95
packages/table/doc/fixedHeader.vue
View File

@ -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>

104
packages/table/doc/footerCount.vue
View File

@ -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>

24
packages/table/doc/index.stories.ts
View File

@ -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',
}

94
packages/table/doc/maxHeight.vue
View File

@ -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>

103
packages/table/doc/mergeRowCol.vue
View File

@ -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>

90
packages/table/doc/mulCheck.vue
View File

@ -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>

82
packages/table/doc/mulHeader.vue
View File

@ -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>

61
packages/table/doc/rowClassName.vue
View File

@ -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>

62
packages/table/doc/singleSelect.vue
View File

@ -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>

68
packages/table/doc/sort.vue
View File

@ -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>

60
packages/table/doc/stripe.vue
View File

@ -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>

135
packages/table/doc/treeTable.vue
View File

@ -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>

40
packages/table/src/table-body/index.ts
View File

@ -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,
},
),
]),
],
)

0
website/play/.gitkeep Normal file
View File

13
website/play/index.vue
View File

@ -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>