当前位置：网站首页>Encapsulation of ele table
Encapsulation of ele table
2022-04-23 02:50:00 【Don't ask 0】
Catalog
ele And Table Table encapsulation
ListTable.vue
- this.$refs.listTable.rowIndex = ‘’; // Clear the currently selected
<template>
<div class='table-wrap'>
<el-table
v-loading='isLoading'
ref="listTable"
:class="`list-table`"
:data="data.tableData"
border
stripe
height="100%"
:header-row-class-name="headerColor"
:summary-method="summaryMethod"
:show-summary="showSummary"
:span-method="spanMethod"
:cell-class-name="cellClassName"
:header-cell-class-name="`list-table-header`"
@select="handleSelectionChange"
style="width: 100%"
@row-click="rowClick"
:row-class-name="tableRewClassName">
<el-table-column
v-if="isSelect"
type="selection"
align="center"
width="50">
</el-table-column>
<el-table-column
v-if="isSerial"
type="index"
:label="' Serial number '"
width="50">
</el-table-column>
<el-table-column
v-for="(item, index) in data.tableCol"
:key="index"
:show-overflow-tooltip="true"
:align="item.align"
:prop="item.prop"
:label="item.label"
:width="item.width">
<template slot-scope="scope">
{
{thousand(scope.row[item.prop])}}
</template>
</el-table-column>
<!-- Multi level meter slot Example :<template v-slot:multistageHeader></template> -->
<slot name="multistageHeader"></slot>
<el-table-column :label="operationText" v-if="isOperation">
<!-- The operation button needs to be placed in the template label : example :"<template scope="scopeVal" v-slot:operation><button @click="edit(scopeVal)"> edit </button></template>" -->
<template slot-scope="scope" >
<slot :scope="scope" name="operation"></slot>
</template>
</el-table-column>
</el-table>
<!-- Pagination -->
<div class="clear_fix page-bottom" v-if="pageData">
<div class="page-wrap">
<span style="font-size: 14px"> The first {
{serialNumber}} strip / in total {
{pageData.total}} strip </span>
<el-pagination
class="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageData.pageSize"
layout="prev, pager, next, sizes"
:total="pageData.total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
/**
* list-table
*
* @module components/list-table
* @desc Table list
* @param data {Object} - tableData Table content list and set align Alignment mode tableCol Table title list Will pass
* @param isLoading {Boolean} - When requesting data, it displays loading Default not to show (false)
* @param isSerial {Boolean} - Whether to display serial number Default not to show (false)
* @param isRowClick {Boolean} - Whether to display the selected line The highlighted red box is not displayed by default (false)
*
* @param showSummary {Boolean} - Whether to display the total row at the end of the table Default not to show (false)
* @param summaryMethod {Funtion} - Pass in a method to define its own aggregation logic
* @param spanMethod {Funtion} - Pass in a method to define its own merge cell logic
* @param cellClassName {Funtion} - Pass in a method to define its own style logic after merging cells
*
* button
* @param isOperation {Boolean} - Whether to operate the button
* @param operationText {String} - ` operation ` Title Change
* Select
* @param isSelect {Boolean} - Whether to select multiple rows of data Checkbox(false)
* @param selectData {Array} - selectData The selected array Initialization selection
* @methods tableMultipleSelection Multiple callback methods (( The data of the current operation row, Check... Or not isPick) )
*
import {numStandard} from "@/utils/tool.js"
export default {
name: 'table-wrap',
components: {},
props: {
data: {
type: Object,
required: true
},
isLoading: {
type: Boolean,
default: false
},
isSerial: {
type: Boolean,
default: false
},
showSummary: {
type: Boolean,
default: false
},
summaryMethod: {
type: Function
},
spanMethod: {
type: Function
},
cellClassName: {
type: Function
},
isOperation: {
type: Boolean,
default: false
},
operationText: {
type: String,
default: ' operation '
},
isSelect: {
type: Boolean,
default: false
},
selectData: {
type: Array
},
pageData: {
type: Object
},
isRowClick:{
type: Boolean,
default: false
}
},
computed: {
serialNumber() {
let pageData = this.pageData
return `${(pageData.currentPage - 1) * pageData.pageSize + 1}-${(pageData.currentPage * pageData.pageSize) > pageData.total ? pageData.total: (pageData.currentPage * pageData.pageSize)} `
}
},
watch:{
data(val, old) {
this.selectInit()
}
},
data () {
return {
rowIndex: '' // Currently selected
};
},
methods: {
thousand(val, type) {
return typeof(val)=== 'number'? numStandard(val) : val
},
headerColor({row, column, rowIndex, columnIndex}){
if (rowIndex > 0) return 'header-color'
},
handleSizeChange(val) {
this.$emit('changSize', val)
},
handleCurrentChange(val) {
this.$emit('changeCurrent', val)
},
handleSelectionChange(val, row) {
let isPick = val.findIndex(oo => oo.id === row.id) > -1;
this.$emit("tableMultipleSelection", row, isPick);
},
selectInit() {
let that= this
if (this.selectData) {
setTimeout(() => {
this.data.tableData.map(item => {
let hasPicked = this.selectData.findIndex(it => it.id === item.id) > -1;
if (hasPicked) {
that.$refs.listTable.toggleRowSelection(item);
}
})
})
}
},
tableRewClassName({row, rowIndex}){
if (!this.isRowClick) return
row.index = rowIndex
if (this.rowIndex === rowIndex ) return 'row-style'
},
rowClick(row){
if (!this.isRowClick) return
this.rowIndex = row.index;
this.$emit("rowClick", row)
}
},
mounted () {
this.selectInit()
}
}
</script>
<style lang="scss" scoped>
.table-wrap{
width: 100%;
height: 100%;
.page-bottom{
margin-top: 8px;
}
.page-wrap{
float: right;
display: flex;
line-height: 32px;
::v-deep .el-pager li.active {
color: #e82323;
border: solid 1px #e82323;
}
::v-deep .el-pager li {
border: solid 1px transparent;
border-radius: 2px;
font-weight: 400;
color: #1a1a1e;
margin: 0 4px;
font-size: 14px;
min-width: 20px;
}
}
.list-table{
height: calc(100% - 50px);
overflow: auto;
}
::v-deep .row-style {
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
z-index: 100;
width: 100%;
height: 100%;
border: 1px solid #e82323;
}
// border: 1px solid #ff0;
// box-shadow: inset 0px 0px 6px 0px rgba(255, 0, 0, .6);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
background: #d5dffc;
}
::v-deep .list-table-header{
background: #e82323;
color: #fff ;
text-align: center;
// text-align: center ;
}
::v-deep .header-color{
.list-table-header{
background: #133891;
}
}
::v-deep .el-table__row--striped td{
background: #d5dffc;
}
::v-deep .has-gutter {
font-weight: bold;
}
::v-deep .el-table .cell{
line-height: 15px;
}
}
</style>
Simple use
<template>
<div style="height: 100%">
<div class="tab_sec">
<list-table :data="TestData" isSerial isSelect />
</template>
<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
components:{
listTable
},
data() {
return {
TestData:{
tableData: [{
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
},{
date: '2016-05-02',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1518 get '
}, {
date: '2016-05-04',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1517 get '
}, {
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
},{
date: '2016-05-02',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1518 get '
}, {
date: '2016-05-04',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1517 get '
}, {
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
}
],
tableCol : [
{
label: " full name ",
prop: "name",
showOverFlowTooltip: true,
},
{
label: " date ",
prop: "date",
showOverFlowTooltip: true,
},
{
label: " Address ",
prop: "address",
// width: "163",
align: "right",
showOverFlowTooltip: true,
}
]
},
}
};
</script>
With operation buttons table
<template>
<div style="height: 100%">
<div class="tab_sec">
<list-table :data="TestData" isSerial isSelect isOperation operationText=" operation " >
<template v-slot:operation="scopeVal">
<button class="blue" @click="view(scopeVal.scope.row)"> details </button>
<button class="blue" @click="edit(scopeVal.scope.row)"> edit </button>
</template>
</list-table>
</div>
</div>
</template>
<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
name: "TestTable",
components:{
listTable
},
data() {
return {
TestData:{
tableData: [{
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
},{
date: '2016-05-02',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1518 get '
}, {
date: '2016-05-04',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1517 get '
}, {
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
},{
date: '2016-05-02',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1518 get '
}, {
date: '2016-05-04',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1517 get '
}, {
date: '2016-05-01',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
}, {
date: '2016-05-03',
name: ' X.h. ',
address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
}
],
tableCol : [
{
label: " full name ",
prop: "name",
showOverFlowTooltip: true,
},
{
label: " date ",
prop: "date",
showOverFlowTooltip: true,
},
{
label: " Address ",
prop: "address",
// width: "163",
align: "right",
showOverFlowTooltip: true,
}
]
},
}
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.blue {
padding: 5px 8px;
background: #E82323;
margin-right: 20px;
}
</style>
Multiline header table
<template>
<div style="height: 100%">
<div class="tab_sec">
<list-table
:data="TestData"
isSerial
isSelect
isOperation
operationText=" operation "
>
<template v-slot:multistageHeader>
<el-table-column label=" Vegetable chicken " width="120">
<el-table-column prop="province" label=" Province " width="120">
</el-table-column>
<el-table-column prop="city" label=" The city " width="120">
</el-table-column>
<el-table-column prop="address" label=" Address " width="300">
</el-table-column>
</el-table-column>
</template>
<template v-slot:operation="scopeVal">
<button class="blue" @click="view(scopeVal.scope.row)"> details </button>
<button class="blue" @click="edit(scopeVal.scope.row)"> edit </button>
</template>
</list-table>
</div>
</div>
</template>
<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
name: "TestTable",
components: {
listTable,
},
data() {
return {
TestData: {
tableData: [
{
date: "2016-05-01",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1519 get ",
province:" Guangdong province, ",
city:" shenzhen "
},
{
date: "2016-05-03",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1516 get ",
province:" Guangdong province, ",
city:" guangzhou "
},
{
date: "2016-05-02",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1518 get ",
province:" Guangdong province, ",
city:" Foshan city, "
},
{
date: "2016-05-04",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1517 get ",
province:" Guangdong province, ",
city:" huizhou "
},
{
date: "2016-05-01",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1519 get ",
},
{
date: "2016-05-03",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1516 get ",
},
{
date: "2016-05-02",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1518 get ",
},
{
date: "2016-05-04",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1517 get ",
},
{
date: "2016-05-01",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1519 get ",
},
{
date: "2016-05-03",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1516 get ",
},
],
tableCol: [
{
label: " full name ",
prop: "name",
showOverFlowTooltip: true,
},
{
label: " date ",
prop: "date",
showOverFlowTooltip: true,
},
{
label: " Address ",
prop: "address",
// width: "163",
align: "right",
showOverFlowTooltip: true,
},
],
},
};
},
methods: {
view(row){
console.log("view", row);
},
edit(row){
console.log("edit", row);
},
},
};
</script>
<style lang="scss" scoped>
.blue {
padding: 5px 8px;
background: #e82323;
margin-right: 20px;
}
</style>
Select a row
<template>
<div style="height: 100%">
<div class="tab_sec">
<list-table
:data="TestData"
isSerial
isOperation
operationText=" operation "
isRowClick
@rowClick="rowClick"
>
<template v-slot:operation="scopeVal">
<button class="blue" @click="view(scopeVal.scope.row)"> details </button>
<button class="blue" @click="edit(scopeVal.scope.row)"> edit </button>
</template>
</list-table>
</div>
</div>
</template>
<script>
import listTable from "@/components/commom/conTable/listTable.vue";
export default {
name: "TestTable",
components: {
listTable,
},
data() {
return {
TestData: {
tableData: [
{
date: "2016-05-01",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1519 get ",
},
{
date: "2016-05-03",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1516 get ",
},
{
date: "2016-05-02",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1518 get ",
},
{
date: "2016-05-04",
name: " X.h. ",
address: " Jinshajiang road, putuo district, Shanghai 1517 get ",
},
],
tableCol: [
{
label: " full name ",
prop: "name",
showOverFlowTooltip: true,
},
{
label: " date ",
prop: "date",
showOverFlowTooltip: true,
},
{
label: " Address ",
prop: "address",
// width: "163",
align: "right",
showOverFlowTooltip: true,
},
],
},
};
},
methods: {
view(row){
console.log("view", row);
},
edit(row){
console.log("edit", row);
},
rowClick( row ) {
console.log("rowClick", row);
}
},
};
</script>
<style lang="scss" scoped>
.blue {
padding: 5px 8px;
background: #e82323;
margin-right: 20px;
}
</style>
版权声明
本文为[Don't ask 0]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230246324820.html
边栏推荐
猜你喜欢
Hack the box optimum
ele之Table表格的封装
JVM class loader
Linux Redis——Redis 数据库缓存服务
Flink learning (XI) watermark
Error installing Mongo service 'mongodb server' on win10 failed to start
Flink stream processing engine system learning (I)
![[unity3d] rolling barrage effect in live broadcasting room](/img/61/46a7d6c4bf887fca8f088e7673cf2f.png)
[unity3d] rolling barrage effect in live broadcasting room
1215_ Hello world used by scons
leangoo脑图-共享式多人协作思维导图工具分享
随机推荐
Step principle of logical regression in machine learning
Classification of technology selection (2022)
Day 3 of learning rhcsa
Log cutting - build a remote log collection server
leetcode 烹饪料理
The input of El input input box is invalid, and error in data(): "referenceerror: El is not defined“
Solve the problem that the registered Google email Gmail mobile number cannot be used for verification
Table space capacity query and expansion of Oracle Database
Practical combat of industrial defect detection project (II) -- steel surface defect detection based on deep learning framework yolov5
Flink stream processing engine system learning (II)
JVM runtime data area (I)
Decision tree principle of machine learning
基于ele封装下拉菜单等组件
Six very 6 computer driver managers: what software is good for driver upgrade? Recommended by the best computer driver management software abroad
leetcode 烹飪料理
进阶上将程序员必备素质
The second day of learning rhcsa
JDBC JDBC
When using art template inheritance, compileerror: invalid or unexpected token generated
MySQL复杂查询使用临时表/with as（类似表变量）