Vue中的vxe-table教程13-总结基础表格中的完整功能
效果图:1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue"></script&g
·
效果图:
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div style="padding: 20px 50px 0 50px">
<vxe-table
border
stripe
resizable
highlight-hover-row
height="400"
:loading="loading"
:checkbox-config="{labelField: 'id', highlight: true, range: true}"
:data="tableData">
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column type="checkbox" title="ID" width="140"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :filters="sexList" :filter-multiple="false"
:formatter="formatterSex"></vxe-table-column>
<vxe-table-column
field="age"
title="Age"
sortable
:filters="[{label: '大于16岁', value: 16}, {label: '大于26岁', value: 26}, {label: '大于30岁', value: 30}]"
:filter-method="filterAgeMethod"></vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js代码
var Main = {
data() {
return {
loading: false,
tableData: [],
sexList: [
{
label: '女',
value: '0'
},
{
label: '男',
value: '1'
}
]
}
},
created() {
this.loading = true;
setTimeout(() => {
this.tableData = [
{id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃'},
{id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou'},
{id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai'},
{id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'vxe-table 从入门到放弃'},
{id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai'},
{id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'vxe-table 从入门到放弃'},
{id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'vxe-table 从入门到放弃'},
{id: 10008, name: 'Test8', role: 'Develop', sex: '0', age: 35, address: 'vxe-table 从入门到放弃'},
{id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'vxe-table 从入门到放弃'},
{id: 100010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃'}
];
this.loading = false
}, 500)
},
methods: {
formatterSex({cellValue}) {
let item = this.sexList.find(item => item.value === cellValue);
return item ? item.label : ''
},
filterAgeMethod({value, row}) {
return row.age > value
}
},
};
var app = new Vue(Main).$mount('#app');
更多推荐
已为社区贡献21条内容
所有评论(0)