描述
1、本文使用组件：Table表格，Modal模态框，Pagination分页，Tag标签
2、使用过程的问题记录
3、使用过程的注意点说明
问题记录
1、Table表格：设置高度（:height="280"）会自动固定表头，表头固定，出现内容对不齐的问题。
2、Table表格：在列模板中使用Tooltip文字提示组件无效。
<column label="描述">
<template slot-scope="row">
<tooltip :content="row.desc">
{{ row.desc }}
</tooltip>
</template>
</column>
3、Table表格：表格内置分页设置layout去除每页条数选项无效。即
pagination: {
pageSize: 10,
current: 1,
total: 50,
layout: 'total, pager', // 不展示
align: 'right', // center left right
},
<pagination :total="800" :current="5" size="small" layout="total, pager"
:change="handlePageChange"></pagination>
4、Pagination分页：切换每页条数报错： Computed property "totalPage" was assigned to but it has no setter.
说明
1、Table表格：设置排序sorter后列头会出现上下小三角，点击后剩一个（说明）
2、Table表格：列排序sorter="custom"
sorter="custom" 排序规则 [设置为true时为远程排序，值为custom时为客户端排序]
1、中文，数据排序从第一条开始或最后一条开始
2、含相同位置的数字英文，按数字从大到小或者从小到大排序
3、纯英文，按英文字母顺序正序或倒序
4、自定义列模板后，排序失效
3、Table表格：table-toolbar工具栏：has-refresh 展示刷新按钮
4、Table表格：table-toolbar工具栏：has-columns-control 展示当前表格展示的列属性，可操作列显示隐藏
5、Table表格：table-toolbar工具栏 作用于全表格，操作数据为选择的表格行
案例
<template>
<div>
<data-table :data="dataSource" bordered striped :change="onTableChange" :rowKey="'id'"
:on-select-change="onSelectChange" checkable show-index>
<!-- 工具栏 -->
<table-toolbar has-refresh has-columns-control>
<template slot="left">
<div class="level-item">
<a class="button is-primary" @click="tableRowDetail"><span class="icon is-small"><i class="fa fa-edit"></i></span><span>查看</span></a>
</div>
</template>
<template slot="right">
<div class="level-item">
<p class="control has-addons">
<input class="input" v-model="searchValue" type="text" placeholder="Find a post">
<button class="button" @click="handleTableSearch">Search</button>
</p>
</div>
</template>
</table-toolbar>
<!-- 正文 -->
<column label="姓名" field="name" sorter="custom"></column>
<column label="工号" field="work_no" sorter="custom"></column>
<column label="生日" field="birthday"></column>
<column label="Email">
<template slot-scope="row">
<tag type="primary">{{ row.email }}</tag>
</template>
</column>
<column label="描述">
<template slot-scope="row">
{{ row.desc }}
</template>
</column>
<column label="成绩" field="achievement" sorter="custom"></column>
</data-table>
<pagination :total="800" :current="5" size="small" layout="total, pager"
:change="handlePageChange"></pagination>
<!-- 弹窗 -->
<modal title="查看" :width="520" :is-show="isShow" transition="fadeDown" @close="isShow=false">
<h4>选中了：</h4>
<p>
<ul>
<li v-for="(item, index) in selectedItems" :key="index">
{{ item.name }}({{ item.work_no }} | {{ item.email }})
</li>
</ul>
</p>
</modal>
</div>
</template>
<script>
export default {
name: 'BluUser',
data() {
return {
searchValue: '',
dataSource: [],
pagination: {
pageSize: 10,
current: 1,
total: 50,
layout: 'total, pager',
align: 'right', // center left right
},
isShow: false,
selectedItems: [],
totalPage: 10
}
},
components: {
},
created() {
let data = ['鲁哲恒','宓远帆','小苏打粉','臭豆腐','大佬']
let num = [1,4,3,5,2]
for (let index = 0; index < 10; index++) {
let obj = {
id: index+1,
name: '路霸'+index+'热搜',
work_no: '0000'+index,
birthday: '1998-06-'+(index+1) < 10 ? '0'+(index+1):(index+1),
email: 'kmills'+index+'@loc.gov',
gender: index % 2 === 0 ? 'Male' : 'Female',
desc: '简单的文字提示气泡框，常用于鼠标hover时'+index,
achievement: '92.'+index
}
this.dataSource.push(obj)
}
},
mounted() {},
computed: {},
watch: {},
methods:{
tableRowDetail() {
if (this.selectedItems.length === 1) {
this.isShow = true;
} else {
this.$notify.open({
content: '请指定一条待查看的数据',
icon: 'smile-o',
duration: 3000,
placement: 'top-center',
transition: 'bounce',
type: 'primary',
});
}
},
onTableChange(table) {
// 作用于 内嵌分页，工具栏-刷新，工具栏-列控制，排序
console.log('tableChange==', table);
},
onSelectChange(key, row) {
// row为数组类型
console.log('onSelectChange==', key, row);
this.selectedItems = row
},
handleTableSearch() {
console.log('search==', this.searchValue);
},
handlePageChange(page) {
// 作用于分页组件
console.log('page===', page);
}
}
}
</script>
