vue + element UI table 属性及事件说明

element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
官网地址：https://element.eleme.cn/#/zh-CN

<template></template>

ElementUI的template模板：一般table表格里边，非纯文字的东西，都套用template模板来写。

<template>
        
</template>

<el-table></el-table>的属性

1.el-table属性介绍

el-table标签属性	说明
:data=“emps”	table数据绑定
stripe	是否显示斑马纹
border	是否显示边框
v-loading=“loading”	局部区域添加loading效果
element-loading-text=“正在加载…”	设置loading文字
element-loading-spinner=“el-icon-loading”	设置loading图标
element-loading-background=“rgba(0, 0, 0, 0.8)”	设置loading背景
style=“width: 100%”	设置宽度

<template>
	<el-table
		:data="emps"
		stripe
		border
		v-loading="loading"
		element-loading-text="正在加载..."
		element-loading-spinner="el-icon-loading"
		element-loading-background="rgba(0, 0, 0, 0.8)"
		style="width: 100%">

	</el-table>
</template>

<script>
    export default{
        name: "SalTable",
        data() {
            return {
                emps: [],
                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                size: 10
            }
        },
        mounted() {
            this.initEmps();
        },
        methods: {
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEmps('advanced');
            },
            initEmps(type) {
                this.loading = true;
                let url = '/sal/table/?page=' + this.page + '&size=' + this.size;
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            }
        }
    }
</script>

<el-table-column></el-table-column>的属性

1.多选框(type = “selection”)

<el-table-column
		type="selection"
		width="55">
</el-table-column>

2.el-table-column的属性介绍

el-table-column标签属性	说明
type=“selection”	多选框
prop=“name”	:data数组中每一个元素对应的值，此处是name字段封装的值
fixed	固定列
align=“left”	内容居左
label=“姓名”	设置标签标题
width=“130”	设置标签宽度

<el-table-column
		prop="name"
		fixed
		align="left"
		label="姓名"
		width="130">
</el-table-column>

<el-pagination></el-pagination>

1.el-pagination属性介绍

el-pagination标签属性	说明
background	可以为分页按钮添加背景色
@current-change=“currentChange”	current-change用于监听页数改变，而内容也发生改变
@size-change=“sizeChange”	pageSize 改变时会触发
layout=“sizes, prev, pager, next, jumper, ->, total, slot”	组件布局，子组件名用逗号分隔
:total=“total”	total代表总条目数

<el-pagination
		background
		@current-change="currentChange"
		@size-change="sizeChange"
		layout="sizes, prev, pager, next, jumper, ->, total, slot"
		:total="total">
</el-pagination>

element事件

1.@selection-change="" 获取选中的所有值

<el-table @selection-change="handleSelectionChange"></el-table>

<script>
    export default{
        name: "SalTable",
        data() {
            return {
                selectionChange: []
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.selectionChange = val;
            }
        }
    }
</script>