当前位置：网站首页>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
边栏推荐
- Linux redis - redis ha sentinel cluster construction details & redis master-slave deployment
- php+mysql对下拉框搜索的内容修改
- Intelligent agricultural management model
- [XJTU computer network security and management] Lecture 2 password technology
- 接口请求时间太长，jstack观察锁持有情况
- PIP install shutil reports an error
- JDBC JDBC
- Machine learning (Zhou Zhihua) Chapter 14 probability graph model
- 打靶narak
- 5W of knowledge points
猜你喜欢
定了，今日起，本号粉丝可免费参与网易数据分析培训营！
![[xjtu Computer Network Security and Management] session 2 Cryptographic Technology](/img/b0/263e8dcbfeb2ce9f504a9c8eb76b07.png)
[xjtu Computer Network Security and Management] session 2 Cryptographic Technology
Specific field information of MySQL export table (detailed operation of Navicat client)
grain rain
基于Scrum进行创新和管理
![[hcip] detailed explanation of six LSAS commonly used by OSPF](/img/31/3b92d42d16a056bf9db9e24471cefd.jpg)
[hcip] detailed explanation of six LSAS commonly used by OSPF
解决win7 中powershell挖矿占用CPU100%
![[wechat applet] set the bottom menu (tabbar) for the applet](/img/e2/98711dfb1350599cbdbdf13508b84f.png)
[wechat applet] set the bottom menu (tabbar) for the applet
基于多态的职工管理系统源码与一些理解
JVM class loader
随机推荐
Solve the problem that the registered Google email Gmail mobile number cannot be used for verification
《信息系统项目管理师总结》第五章 项目质量管理
Those years can not do math problems, using pyhon only takes 1 minute?
魔王冷饭||＃078 魔王答上海、南京行情；沟通指导；得国和打杀筛选；赚钱的目的；改变别人看法
基于Torchserve部署SBERT模型＜语义相似度任务＞
JZ76 删除链表中重复的结点
Difference between relative path and absolute path (often asked in interview)
JZ22 链表中倒数最后k个结点
leangoo脑图-共享式多人协作思维导图工具分享
Log4j knowledge point record
Liunx foundation - zabbix5 0 monitoring system installation and deployment
Slave should be able to synchronize with the master in tests/integration/replication-psync.tcl
Interim summary (Introduction + application layer + transportation layer)
OCR recognition PDF file
Innovation and management based on Scrum
Servlet template engine usage example
字符串去掉空格问题
Use of go language web Middleware
leetcode 烹饪料理
Redis data server / database / cache (2022)