vueblu之Table 表格案例记录

描述

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去除每页条数选项无效。即 中的layout默认为'total, pager, sizer, jumper'，而去除'sizer, jumper'，却无效果。建议直接使用Pagination分页组件。

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>