cloud-ui.vusion
Version:
Vusion Cloud UI
875 lines (816 loc) • 175 kB
Markdown
### 分页
#### 纯数组前端分页
``` vue
<template>
<u-table-view striped :data="data" pageable :page-size="10">
<u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const data = [];
for (let i = 0; i < 75; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
data.push(item);
}
return { data };
},
};
</script>
```
#### 刚开始为空的情况
``` vue
<template>
<u-table-view striped :data-source="data" pageable :page-size="10">
<u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
return { data: undefined };
},
created() {
setTimeout(() => {
this.data = [];
}, 200);
},
};
</script>
```
### 排序
#### 纯数组前端排序
``` vue
<template>
<u-table-view striped :data="data" pageable :page-size="10"
:sorting="{ field: 'loginTime', order: 'asc' }">
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const data = [];
for (let i = 0; i < 75; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
data.push(item);
}
return { data };
},
};
</script>
```
#### 后端排序，前端分页
``` vue
<template>
<u-table-view striped :data-source="load" pageable :page-size="10"
:sorting="{ field: 'loginTime', order: 'asc' }" remote-sorting>
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const remoteData = [];
for (let i = 0; i < 75; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
remoteData.push(item);
}
export default {
methods: {
load({ sorting }) {
// 这里使用 Promise 和 setTimeout 模拟一个后端请求
return new Promise((resolve, reject) => {
setTimeout(() => {
const orderSign = sorting.order === 'asc' ? 1 : -1;
resolve(remoteData.sort((item1, item2) => {
if (item1[sorting.field] === item2[sorting.field])
return 0;
else
return item1[sorting.field] > item2[sorting.field] ? orderSign : -orderSign;
}));
}, 400);
});
},
},
};
</script>
```
### 过滤
#### 纯前端过滤
``` vue
<template>
<u-table-view striped :data="data" pageable :page-size="10"
:filtering="{ address: '浙江省杭州市滨江区网商路599号网易大厦' }">
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address" :filters="[
{ text: '全部' },
{ text: '网易大厦', value: '浙江省杭州市滨江区网商路599号网易大厦' },
{ text: '网易二期', value: '浙江省杭州市滨江区网商路599号网易大厦二期' },
{ text: '英飞特科技园', value: '浙江省杭州市滨江区江虹路459号英飞特科技园' },
{ text: '西可科技园', value: '浙江省杭州市滨江区秋溢路606号西可科技园' },
]"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"
></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const data = [];
for (let i = 0; i < 75; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
data.push(item);
}
return { data };
},
};
</script>
```
#### 后端过滤，前端分页
``` vue
<template>
<u-table-view striped :data-source="load" pageable :page-size="10"
:sorting="{ field: 'loginTime', order: 'asc' }" remote-sorting
:filtering="{ address: '浙江省杭州市滨江区网商路599号网易大厦' }" remote-filtering>
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address" :filters="[
{ text: '全部' },
{ text: '网易大厦', value: '浙江省杭州市滨江区网商路599号网易大厦' },
{ text: '网易二期', value: '浙江省杭州市滨江区网商路599号网易大厦二期' },
{ text: '英飞特科技园', value: '浙江省杭州市滨江区江虹路459号英飞特科技园' },
{ text: '西可科技园', value: '浙江省杭州市滨江区秋溢路606号西可科技园' },
]"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const remoteData = [];
for (let i = 0; i < 175; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
remoteData.push(item);
}
export default {
methods: {
load({ sorting, filtering }) {
// 这里使用 Promise 和 setTimeout 模拟一个后端请求
return new Promise((resolve, reject) => {
setTimeout(() => {
const filteredData = filtering ? remoteData.filter((item) => item.address === filtering.address) : remoteData;
const orderSign = sorting.order === 'asc' ? 1 : -1;
resolve(filteredData.sort((item1, item2) => {
if (item1[sorting.field] === item2[sorting.field])
return 0;
else
return item1[sorting.field] > item2[sorting.field] ? orderSign : -orderSign;
}));
}, 400);
});
},
},
};
</script>
```
### 表头吸顶
``` html
<u-table-view stick-head :stick-head-offset="60" :data-source="[
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]" style="max-height: 300px;">
<u-table-view-column fixed title="序号" type="index" width="50"></u-table-view-column>
<u-table-view-column fixed title="用户名" field="name" width="70"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="160"></u-table-view-column>
<u-table-view-column title="电子邮箱" field="email" width="200"></u-table-view-column>
<u-table-view-column title="地址" field="address" width="400"></u-table-view-column>
<u-table-view-column title="创建时间" field="createdTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column fixed title="操作" width="120">
<template slot="cell">
<u-link>详情</u-link>
<u-link>设置</u-link>
</template>
</u-table-view-column>
</u-table-view>
```
``` html
<u-table-view stick-head :stick-head-offset="60" :data-source="[
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]" style="max-height: 300px;">
<u-table-view-column title="序号" type="index" width="50"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="70"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="160"></u-table-view-column>
<u-table-view-column title="电子邮箱" field="email" width="200"></u-table-view-column>
<u-table-view-column title="地址" field="address" width="400"></u-table-view-column>
<u-table-view-column title="创建时间" field="createdTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column title="操作" width="120">
<template slot="cell">
<u-link>详情</u-link>
<u-link>设置</u-link>
</template>
</u-table-view-column>
</u-table-view>
```
### 文字过长问题
#### 默认多行显示
``` html
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]">
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
```
#### 省略显示
``` html
<u-linear-layout direction="vertical">
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]">
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column ellipsis title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column ellipsis title="地址" field="address"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]" ellipsis>
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]" ellipsis>
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address" :ellipsis="false"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]" ellipsis>
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address" :ellipsis="false"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
<u-table-view-column-dynamic :data-source="[{name: '这是个很长很长很长很长很长很长的动态列名称'}]">
<template slot="title" slot-scope="{ columnItem }">
<u-text>{{ columnItem.name }}</u-text>
</template>
<template slot="cell" slot-scope="{ item, columnItem }">
<u-text>{{ item.name }} {{ columnItem.name }}</u-text>
</template>
</u-table-view-column-dynamic>
</u-table-view>
</u-linear-layout>
```
#### 表头文字省略展示
``` html
<u-linear-layout direction="vertical">
<u-table-view line="horizontal" striped :data="[
{ id: 1, name: '张三张三张三张三张三张三张三张三张三张三', address: '浙江省杭州市滨江区网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四李四李四李四李四李四李四李四李四李四', address: '浙江省杭州市滨江区秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', address: '浙江省杭州市滨江区长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', address: '浙江省杭州市滨江区网商路599号网易大厦二期', birthday: '19930716' },
]" ellipsis>
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column ellipsis title="这是一个很长很长很长很长很长很长很长很长的名字" field="name" width="20%" th-ellipsis></u-table-view-column>
<u-table-view-column ellipsis title="地址" field="address"></u-table-view-column>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的出生日期" field="birthday" width="20%" th-ellipsis></u-table-view-column>
<u-table-view-column-group title="用户信息用户信息用户信息用户信息用户信息用户信息用户信息" th-ellipsis>
<u-table-view-column title="用户名" field="name"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone"></u-table-view-column>
</u-table-view-column-group>
</u-table-view>
<u-table-view line striped :data-source="[
{ name: '这是一个很长很长很长很长很长很长很长很长的名字', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '名字就是起得这么这么这么这么这么这么长', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]" th-ellipsis>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的名字" field="name" width="30%" :th-ellipsis="false"></u-table-view-column>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address">
<template #title>
<u-text :text="`这是一个很长很长很长很长很长很长很长很长的更新时间`"></u-text>
</template>
</u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view line striped :data-source="[
{ name: '这是一个很长很长很长很长很长很长很长很长的名字', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '名字就是起得这么这么这么这么这么这么长', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]" th-ellipsis ellipsis>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的名字" field="name" width="30%" :th-ellipsis="false"></u-table-view-column>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address">
<template #title>
<u-text :text="`这是一个很长很长很长很长很长很长很长很长的更新时间`"></u-text>
</template>
</u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column-group title="用户信息用户信息用户信息用户信息用户信息用户信息用户信息">
<u-table-view-column title="用户名" field="name"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone"></u-table-view-column>
</u-table-view-column-group>
</u-table-view>
<u-table-view :data-source="[
{ name: '这是一个很长很长很长很长很长很长很长很长的名字', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '名字就是起得这么这么这么这么这么这么长', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]"
:sorting="{ field: 'loginTime', order: 'asc' }"
:filtering="{ address: '浙江省杭州市滨江区网商路599号网易大厦' }" th-ellipsis>
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="这是一个很长很长很长很长很长很长很长很长的手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的地址" field="address" :filters="[
{ text: '全部' },
{ text: '网易大厦', value: '浙江省杭州市滨江区网商路599号网易大厦' },
{ text: '网易二期', value: '浙江省杭州市滨江区网商路599号网易大厦二期' },
{ text: '英飞特科技园', value: '浙江省杭州市滨江区江虹路459号英飞特科技园' },
{ text: '西可科技园', value: '浙江省杭州市滨江区秋溢路606号西可科技园' },
]"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view :data-source="[
{ name: '这是一个很长很长很长很长很长很长很长很长的名字', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '名字就是起得这么这么这么这么这么这么长', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
]"
:sorting="{ field: 'loginTime', order: 'asc' }"
:filtering="{ address: '浙江省杭州市滨江区网商路599号网易大厦' }" th-ellipsis ellipsis>
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="这是一个很长很长很长很长很长很长很长很长的手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="这是一个很长很长很长很长很长很长很长很长的地址" field="address" :filters="[
{ text: '全部' },
{ text: '网易大厦', value: '浙江省杭州市滨江区网商路599号网易大厦' },
{ text: '网易二期', value: '浙江省杭州市滨江区网商路599号网易大厦二期' },
{ text: '英飞特科技园', value: '浙江省杭州市滨江区江虹路459号英飞特科技园' },
{ text: '西可科技园', value: '浙江省杭州市滨江区秋溢路606号西可科技园' },
]" sortable></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
<u-table-view-column-dynamic :data-source="[{name: '这是个很长很长很长很长很长很长的动态列名称'}]">
<template slot="title" slot-scope="{ columnItem }">
<u-text>{{ columnItem.name }}</u-text>
</template>
<template slot="cell" slot-scope="{ item, columnItem }">
<u-text>{{ item.name }} {{ columnItem.name }}</u-text>
</template>
</u-table-view-column-dynamic>
</u-table-view>
</u-linear-layout>
```
### 列分布
#### 全部百分比
``` html
<u-table-view striped :data="[
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
]" style="max-height: 300px;">
<u-table-view-column title="序号" field="id" width="20%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="20%"></u-table-view-column>
<u-table-view-column title="省份" field="province" width="20%"></u-table-view-column>
<u-table-view-column title="城市" field="city" width="20%"></u-table-view-column>
<u-table-view-column title="区县" field="district" width="40%"></u-table-view-column>
<u-table-view-column title="地址" field="address" width="40%"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
```
#### 百分比与数字结合，横向滚动
``` html
<u-table-view striped :data="[
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
]" style="max-height: 300px;">
<u-table-view-column title="序号" field="id" width="10%"></u-table-view-column>
<u-table-view-column title="姓名" field="name" width="30%"></u-table-view-column>
<u-table-view-column title="省份" field="province" width="200"></u-table-view-column>
<u-table-view-column title="城市" field="city" width="200"></u-table-view-column>
<u-table-view-column title="区县" field="district" width="200"></u-table-view-column>
<u-table-view-column title="地址" field="address" width="400"></u-table-view-column>
<u-table-view-column title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
```
#### 固定列
``` html
<u-table-view striped :data="[
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
{ id: 1, name: '张三', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦', birthday: '19910528' },
{ id: 2, name: '小明', province: '浙江省', city: '杭州市', district: '滨江区', address: '江虹路459号英飞特科技园', birthday: '19920914' },
{ id: 3, name: '李四', province: '浙江省', city: '杭州市', district: '滨江区', address: '秋溢路606号西可科技园', birthday: '19900228' },
{ id: 4, name: '李华', province: '浙江省', city: '杭州市', district: '滨江区', address: '长河路590号东忠科技园', birthday: '19891210' },
{ id: 5, name: '王五', province: '浙江省', city: '杭州市', district: '滨江区', address: '网商路599号网易大厦二期', birthday: '19930716' },
]" style="max-height: 300px;">
<u-table-view-column fixed title="序号" field="id" width="5%"></u-table-view-column>
<u-table-view-column fixed title="姓名" field="name" width="10%"></u-table-view-column>
<u-table-view-column title="省份" field="province" width="200"></u-table-view-column>
<u-table-view-column title="城市" field="city" width="200"></u-table-view-column>
<u-table-view-column fixed title="出生日期" field="birthday" width="20%"></u-table-view-column>
</u-table-view>
```
### 多选的问题
另一种是通过`value-field`属性指定数据中唯一值的字段，再通过`:values.sync`对选择值进行双向绑定。
``` vue
<template>
<u-table-view striped value-field="id" :values="values" :data="data">
<u-table-view-column type="checkbox" title="选择" width="8%"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="12%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
return {
values: ['5cd49be8f65c4738', 'f799a0467c494601'],
data: [
{ id: '07cdcb8ed5e94cec', name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ id: '5cd49be8f65c4738', name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ id: 'f799a0467c494601', name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ id: '40e8ca488a1c4bce', name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ id: '150823cc351642b6', name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
],
};
},
};
</script>
```
### 局部报错
局部报错不应该让整个表格都挂掉。
``` vue
<template>
<u-table-view striped value-field="id" :values="values" :data="data">
<u-table-view-column type="checkbox" title="选择" width="8%"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="12%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address">
<template slot="cell" slot-scope="{ item, value }">
<div>{{ value | someFilter }}</div>
</template>
</u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
filters: {
someFilter(value) {
throw Error('[ERROR] some errors');
},
},
data() {
return {
values: ['5cd49be8f65c4738', 'f799a0467c494601'],
data: [
{ id: '07cdcb8ed5e94cec', name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ id: '5cd49be8f65c4738', name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ id: 'f799a0467c494601', name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ id: '40e8ca488a1c4bce', name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ id: '150823cc351642b6', name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
],
};
},
};
</script>
```
### value-field
value-field 需要编辑时，建议使用另一个字段。
``` vue
<template>
<u-table-view striped value-field="name" :values="values" :data="data">
<u-table-view-column type="checkbox" title="选择" width="8%"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="12%">
<template slot="cell" slot-scope="{ item, value }">
<u-input v-model="item.name"></u-input>
</template>
</u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address">
<template slot="cell" slot-scope="{ item, value }">
<u-input v-model="item.address"></u-input>
</template>
</u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
return {
values: ['5cd49be8f65c4738', 'f799a0467c494601'],
data: [
{ id: '07cdcb8ed5e94cec', name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ id: '5cd49be8f65c4738', name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ id: 'f799a0467c494601', name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ id: '40e8ca488a1c4bce', name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ id: '150823cc351642b6', name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
],
};
},
};
</script>
```
### 数据后来加载过来时，高度应当重新计算
``` vue
<template>
<u-table-view striped :data="data">
<u-table-view-column type="checkbox" title="选择" width="8%"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="12%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
return {
data: undefined,
};
},
created() {
this.load();
},
methods: {
load() {
setTimeout(() => {
this.data = [
{ id: '07cdcb8ed5e94cec', name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ id: '5cd49be8f65c4738', name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ id: 'f799a0467c494601', name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ id: '40e8ca488a1c4bce', name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ id: '150823cc351642b6', name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
}, 2000);
},
},
};
</script>
```
#### data-source Error 的情况
``` vue
<template>
<u-table-view striped :data-source="load">
<u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</template>
<script>
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
// 构造数量较多的 500 条数据
const remoteData = [];
for (let i = 0; i < 75; i++) {
const item = Object.assign({}, baseData[i % 5]);
item.name += '-' + i;
item.phone = String(+item.phone + i);
item.createdTime += i * 1000 * 3600 * 24;
item.loginTime += i * 1000 * 3600 * 24;
remoteData.push(item);
}
export default {
methods: {
load() {
// 这里使用 Promise 和 setTimeout 模拟一个后端请求
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('error');
}, 400);
});
},
},
};
</script>
```
### 步骤条中使用
``` vue
<template>
<u-steps :value="value">
<u-step title="Step1">
Content1
<u-linear-layout>
<u-button @click="onNext">下一步</u-button>
</u-linear-layout>
</u-step>
<u-step title="Step2">
<u-table-view striped :data="data">
<u-table-view-column type="checkbox" title="选择" width="8%"></u-table-view-column>
<u-table-view-column title="用户名" field="name" width="12%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
<u-linear-layout>
<u-button @click="onPrev">上一步</u-button>
<u-button @click="onNext">下一步</u-button>
</u-linear-layout>
</u-step>
<u-step title="Step3">
Content3
<u-linear-layout>
<u-button @click="onPrev">上一步</u-button>
<u-button>创建</u-button>
</u-linear-layout>
</u-step>
</u-steps>
</template>
<script>
export default {
data() {
return {
data: [
{ id: '07cdcb8ed5e94cec', name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ id: '5cd49be8f65c4738', name: '小明', phone: '13727160283', email: 'xiaoming@163.com', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ id: 'f799a0467c494601', name: '李四', phone: '18897127809', email: 'lisi@163.com', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ id: '40e8ca488a1c4bce', name: '李华', phone: '18749261214', email: 'lihua@163.com', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ id: '150823cc351642b6', name: '王五', phone: '13579340020', email: 'wangwu@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
],
value: 0,
};
},
methods: {
onNext() {
this.value += 1;
},
onPrev() {
this.value -= 1;
},
},
};
</script>
```
### 排序+调整列宽
``` vue
<template>
<u-table-view resizable striped :data="data" pageable :page-size="10"
:filtering="{ address: '浙江省杭州市滨江区网商路599号网易大厦' }">
<u-table-view-column sortable title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column sortable title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address" :filters="[
{ text: '全部' },
{ text: '网易大厦', value: '浙江省杭州市滨江区网商路599号网易大厦' },
{ text: '网易二期', value: '浙江省杭州市滨江区网商路599号网易大厦二期' },
{ text: '英飞特科技园', value: '浙江省杭州市滨江区江虹路459号英飞特科技园' },
{ text: '西可科技园', value: '浙江省杭州市滨江区秋溢路606号西可科技园' },
]"></u-table-view-column>
<u-table-view-column sortable title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"
></u-table-view-column>
</u-table-view>
</template>
<script>
export default {
data() {
const baseData = [
{ name: '张三', phone: '18612917895', email: 'zhangsan@163.com', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },