首先先安装elementUI
npm i element-ui -S
然后就是引用：
1.完整引入
/*在 main.js 中写入以下内容：*/
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
-
按需引入（按需引入就根据官网来进行引入，本篇文章就不多说了）
Element - 网站快速成型工具（vue2）
-
接下来就是正题了，以下就是封装好的表格组件
<style type="text/css" scoped>
.system-table-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
/* height: 100%; */
}
.system-table-box .system-table {
flex: 1;
height: 100%;
font-size: 12px;
color: #222;
}
.system-table-box .system-page {
margin-top: 20px;
}
.system-table-box .el-empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.system-table-box .elPagination {
width: 100%;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.skip {
position: absolute;
right: 155px;
top: 22px;
display: flex;
}
</style>
<style>
/* 表格右上角 */
.system-table-box .theme-coustom .el-table--border th,
.theme-coustom .el-table__fixed-right-patch {
background: #f5f6fa;
border-bottom: none !important;
border-left: none !important;
}
/* 分页箭头 */
.system-table-box .el-select
.el-input .el-select__caret::before {
content: "";
background: url(../img/topArrow.png) center center no-repeat;
/* background-size: 18px 15px; */
position: absolute;
width: 100%;
height: 100%;
appearance: none;
}
/* 分页一页显示几条div样式 */
.system-table-box .el-pagination
.el-select .el-input .el-input__inner {
border-radius: 20px;
font-size: 12px;
}
/* 分页箭头方向 */
.system-table-box .el-select
.el-input .el-select__caret.is-reverse {
transform: rotateZ(180deg) !important;
}
/* 表格格子样式 */
.system-table-box .theme-coustom .el-table td,
.theme-coustom .el-table th.is-leaf {
color: #222;
font-size: 12px;
padding: 0;
height: 38px;
}
.system-table-box
.el-table td, .el-table th {
padding: 6px 0;
}
.system-table-box .blue {
color: #0070cc !important;
cursor: pointer !important;
font-size: 14px;
}
.system-table-box .orange {
color: orange !important;
cursor: pointer !important;
font-size: 14px;
}
.system-table-box .red {
color: red !important;
cursor: pointer !important;
font-size: 14px;
}
.system-table-box .width100 {
width: 100%;
}
.system-table-box .around {
display: flex;
justify-content: space-around;
align-items: center;
padding-right: 10px;
}
.system-table-box .el-table th .cell {
white-space: nowrap !important;
text-overflow: ellipsis;
word-break: break-all;
}
.system-table-box .el-table .cell {
padding-right: 0;
line-height: normal;
}
.system-table-box .el-table__placeholder {
width: 15px;
}
/* 表格 输入模式(输入框, 选择框... 样式调整) */
.system-table-box .el-input__inner {
height: 22px !important;
border: 0 !important;
font-size: 14px !important;
}
.system-table-box .sr {
margin-right: 7px !important;
}
.system-table-box .el-select {
width: 100% !important;
}
.system-table-box .el-input-group__append {
border: 0 !important;
}
.system-table-box .el-input__icon {
height: auto !important;
line-height: 23px !important;
}
.system-table-box
.el-date-editor .el-range-input, .el-date-editor .el-range-separator {
height: auto !important;
}
.system-table-box
.el-table--scrollable-x .el-table__body-wrapper {
/* display: flex; */
align-items: center;
justify-content: center;
flex-direction: column;
}
.system-table-box .el-table__empty-text {
line-height: 25px;
}
/* 个性化跳转页面模块 */
/* .system-table-box .cssExceed {
white-space: normal !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
} */
/* .system-table-box
.el-pagination .el-select .el-input {
margin-right: 135px;
} */
/* .system-table-box .is-scrolling-none {
height: auto !important;
} */
/* 347 122 */
/* .system-table-box .is-scrolling-none {
height: 540px;
} */
</style>
<template>
<!-- :style="{height: tableHeight}" -->
<!-- :header-cell-style="{background: '#f5f6fa'}" -->
<div class="system-table-box" ref="tableView" id="tableId" :style="{height: tableHeight != '100%' && tableHeight != 'all' ? tableHeight + '!important' : tableHeight == 'all' ? '100% !important' : '100%'}">
<el-table ref="table" v-bind="$attrs" class="system-table" height="100%" :data="data" @selection-change="handleSelectionChange" @select='onTableSelect' @select-all='selectAll' :border="true" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(228 239 236 / 79%)" :highlight-current-row="tableRadio" @current-change="tableRadioChange" :span-method="spanMethod" :lazy="lazy" :row-key="rowKey" :load="handleLoad" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<template #empty>
<el-empty description="暂无数据" :image-size="emptySize"></el-empty>
</template>
<el-table-column type="selection" align="left" width="35" v-if="showSelection" :reserve-selection="reserveSelection" :selectable="selectable" />
<el-table-column label="序号" width="60" align="center" v-if="showIndex">
<template #default="scope">
{{ (page.index - 1) * page.size + scope.$index + 1}}
</template>
</el-table-column>
<slot></slot>
<!-- <el-table-column label="操作demo" :width="150" fixed="right">
<template #default="{row}">
<el-button-group class="width100" >
<div id="tableButtonId" ></div>
<el-dropdown>
<span class="el-dropdown-link">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" id="tableButtonId" >
<div></div>
</el-dropdown-menu>
</el-dropdown>
</el-button-group>
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<div class="elPagination" v-if="showPage">
<!-- background -->
<el-pagination :current-page="page.index" :layout="pageLayout" :total="page.total" :page-size="page.size" :page-sizes="pageSizes" @current-change="handleCurrentChange" @size-change="handleSizeChange" class="system-page">
</el-pagination>
</div>
</div>
</template>
<script type="text/javascript">
export default {
//复用组件
components: {},
//接收父组件数据
props: {
reserveSelection: { type: Boolean, default: false },
lazy: { type: Boolean, default: false }, // 树形模式
rowKey: { type: String, default: 'cId' }, // 设置树形模式key
tableRadio: { type: Boolean, default: false }, // 是否单选
emptySize: { type: Number, default: 120 },
tableHeight: { type: String, default: '100%' },
loading: { type: Boolean, default: false }, // 数据加载
data: { type: Array, default: () => [] }, // 数据源
select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
showIndex: { type: Boolean, default: false }, // 是否展示index选择，默认否
showSelection: { type: Boolean, default: false }, // 是否展示选择框，默认否
selectable: {
type: Function,
default: () => {
return true
}
},
showPage: { type: Boolean, default: true }, // 是否展示页级组件，默认是
pageLayout: { type: String, default: "sizes, prev, pager, next, jumper" }, // 分页需要显示的东西，默认全部 "显示总条数(total)"
page: { // 分页参数
type: Object,
default: () => {
return { index: 1, size: 10, total: 0 }
}
},
pageSizes: {
type: Array,
default: () => {
return [5, 10, 20, 50, 100]
}
},
spanMethod: {
type: Function,
default: () => {}
}
},
data() {
return {
timer: null,
table: [],
checkList: [],
}
},
beforeDestroy() {},
computed: {},
watch: {},
activied() {},
mounted() {
// window.addEventListener('resize', this.packResize)
// this.$nextTick(() => {
// var node = document.getElementById("buttonId"); // 通过id选择器获取节点对象
// console.log(node);
// var htmlContent = node.innerHTML; // 获取节点的HTML内容
// // console.log( '<el-dropdown-item>' + htmlContent + '</el-dropdown-menu>');
// var tableId = document.getElementById("tableButtonId");
// tableId.innerHTML = htmlContent
// })
},
beforeDestroy() {},
methods: {
// 页面尺寸改变时触发
packResize(e) {},
// 表格树形懒加载
handleLoad(tree, treeNode, resolve) {
this.$emit('handleLoad', tree, treeNode, resolve)
},
// 单选数据
tableRadioChange(val) {
this.$emit("tableRadioChange", val)
},
// 分页相关：监听页码切换事件
handleCurrentChange(val) {
this.$emit("currentChange", val)
},
// const vLoading = computed(() => props.loading)
// 分页相关：监听单页显示数量切换事件
handleSizeChange(val) {
this.$emit("sizeChange", val)
},
// 表前复选框勾选事件
handleSelectionChange(val) {
this.$emit("selection-change", val)
},
onTableSelect(rowArr, row) {
this.$emit("select", rowArr, row)
},
selectAll(selection) {
this.$emit("select-all", selection)
},
// 多选勾选框回填 (自动勾选)
// (checkList: 需勾选的数组)
// (key: 与总数组对比的key)
toggleRowSelection(checkList, key) {
this.checkList = checkList
this.$refs.table.clearSelection();
if (checkList.length == 0) return
this.$nextTick(() => {
for (let item of this.data) {
for (let val of this.checkList) {
if (val[key] == item[key]) this.$refs.table.toggleRowSelection(item, true);
}
}
})
},
clearSelection() {
this.$refs.table.clearSelection();
},
// 单选回填 (自动高亮)
separateSelection(val, key) {
this.checkList = val
//this.curRow之前选中的行
let curIndex = this.data.findIndex(item => item[key] === this.checkList[0][key])
//如果之前选中的行被删除，默认选中第一行
this.$nextTick(() => {
let rows = this.$refs.table.$el.querySelectorAll('tbody > tr.el-table__row')
if (rows.length) {
rows = Array.from(rows)
rows.forEach(item => item.classList.remove('current-row'))
// 直接更改样式
curIndex === -1 ? rows[curIndex].classList.add('') : rows[curIndex].classList.add('current-row')
}
})
},
setCurrentRow(row) {
if (this.$refs.table) {
this.$refs.table.setCurrentRow(row);
}
},
setToggleRowSelection(row, select) {
if (row) {
if (this.$refs.table) {
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(row, select);
});
}
}
},
/**
* 获取表格store
* */
getStore() {
return this.$refs.table.store;
}
}
}
</script>
