The function is as follows:↓
Pass the value as follows ↓
data() {
return {
tableParam: {
type: "selection", //Whether multiple selections are possible
loading: false, //loading status
operate: true, //whether to display the operation area
header: [{ //header
width: 90,
text: "Location",
value: "local",
\t\t\t\t\t\t
}, {
width: 80,
text: "Score",
value: "score",
}, ],
body: [], //backend data
},
selectDatas: [], //The selected value of the check box
}
},
mounted() {
},
onLoad(options) {
setTimeout(() => {
this.tableParam.body = [{ //Simulate backend data
local: "S1",
score: 111,
id: 1,
},
{
local: "S2",
score: 222,
id: 2
},
]
}, 1000)
},
Comments on component passing value↓
/**
* Recording interactive animation components
* @property {Object} tableParam table box configuration
\t\t
* @event {Function} getCurrentRow(i,row) Get row index and event
* @event {Function} addTable add button callback
* @event {Function} editTable edit button callback
* @event {Function} delTable delete button callback
* @event {Function} getMultipleSelection(rows) Get the data selected by the left multi-selection box
*/
The complete code is as follows↓
Parent page ↓
<template>
<view class="table">
<view class="project-item-content">
<view class="project-item-title">Test</view>
<button type="primary" @click="getAllTableData">Click to get all table data</button>
<simpTable ref="table" @getMultipleSelection="getMultipleSelection" :tableParam="tableParam"
@delTable="delTable" @editTable="editTable" @addTable="addTable" @getCurrentRow="getCurrentRow">
</simpTable>
</view>
</view>
</template>
<script>
export default {
computed: {},
data() {
return {
tableParam: {
type: "selection", //Whether multiple selections are possible
loading: false, //loading status
operate: true, //Whether to display the operation area
header: [{ //header
width: 90,
text: "Location",
value: "local",
}, {
width: 80,
text: "Score",
value: "score",
}, ],
body: [], //backend data
},
selectDatas: [], //The selected value of the check box
}
},
mounted() {
},
onLoad(options) {
setTimeout(() => {
this.tableParam.body = [{ //Simulate backend data
local: "S1",
score: 111,
id: 1,
},
{
local: "S2",
score: 222,
id: 2
},
]
}, 1000)
},
methods: {
getCurrentRow(i, row) {
console.log("Get current row index", i)
console.log("Get the current row = data", row)
},
addTable(tableLength) {
console.log("table length tableLength", tableLength)
},
editTable(row) {
console.log("This row of edited data row", row)
},
getMultipleSelection(selectDatas) {
console.log("checkbox selected data selectDatas", selectDatas)
this.selectDatas = selectDatas
},
delTable(index) {
console.log("The index index of the deleted line", index)
},
getAllTableData() {
let self = this
this. $nextTick(() => {
console.log('get table data from parent component', self.$refs.table.returnParams())
})
}
},
}
</script>
<style lang="scss" scoped>
.project-item-content {
width: 95%;
margin: 0 auto;
box-sizing: border-box;
padding: 15rpx 25rpx;
margin-top: 20rpx;
background-color: white;
border-radius: 10rpx;
box-shadow: 0px 0px 10rpx rgba(88, 97, 208, 0.3);
.project-item-title {
height: 100rpx;
font-family: Source Han Sans CN;
font-weight: 600;
color: #000000;
font-size: 35rpx;
line-height: 100rpx;
}
}
.btnContainer {
padding: 20rpx;
position: fixed;
bottom: 50rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.center {
display: flex;
align-items: center;
justify-content: center;
}
.onOk {
width: 47%;
height: 80rpx;
background: #5861d0;
border-radius: 40rpx;
box-shadow: 0px 0px 5rpx #5861d0;
font-weight: 500;
color: #ffffff;
font-size: 32rpx;
}
.onClose {
width: 47%;
height: 80rpx;
background: #fdfdff;
border: 3rpx solid;
border-color: #5861d0;
border-radius: 40rpx;
box-shadow: 0px 0px 5rpx #5861d0;
font-weight: 500;
color: #5861d0;
font-size: 32rpx;
}
}
</style>
table component↓
<template>
<view>
<button class="addBtn" @click="editRow()">Add</button>
<uni-table ref="table" :loading="tableParam.loading" border :type="tableParam.type" emptyText="No more data"
@selection-change="selectionChange">
<uni-tr>
<uni-th v-for="(head,index1) in tableParam.header" :key="index1 + 'header'" align="center"
:width="head.width">{<!-- -->{head.text}}</uni-th>
<uni-th align="center" width="110" v-if="tableParam.operate">operation</uni-th>
</uni-tr>
<uni-tr v-for="(body,index) in tableParam.body" :key="index + 'body'">
<uni-td align="center" v-for="(head2,index2) in tableParam.header" :key="index2">
<span class="bodyText">{<!-- -->{body[head2.value]}}</span>
</uni-td>
<view v-if="tableParam.operate" style="position: relative;">
<uni-td align="center" width="150">
<span class="tdSpan" @click.stop="editRow(index)">Edit</span>
<span class="tdSpan" @click.stop="deleteRow(index)">Delete</span>
</uni-td>
</view>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
/**
* Recording interactive animation components
* @property {Object} tableParam table box configuration
\t\t
* @event {Function} getCurrentRow(i,row) Get row index and event
* @event {Function} addTable add button callback
* @event {Function} editTable edit button callback
* @event {Function} delTable delete button callback
* @event {Function} getMultipleSelection(rows) Get the data selected by the left multi-selection box
*/
name:"simpleTable",
props: {
tableParam: {
type: Object,
required: true
}
},
data() {
return {
index: -1,
}
},
watch: {
'tableParam.body': {
handler(newVal, oldVal) {
this.$nextTick(()=>{
let trDoms = document. getElementsByClassName('uni-table-tr');
let len = trDoms. length;
if(len>1){
for (let i = 1; i < len + 1; i + + ) {
let item = trDoms[i];
if (this. tableParam. body[i-1]) {
item.onclick = () => {
let row = this.tableParam.body[i-1];
this. getCurrentRow(i-1, row);
}
\t\t\t\t\t\t\t
}
}
}
})
},
deep: true,
\t\t
}
},
mounted() {
},
methods: {
getCurrentRow(rowIndex, row) {
this.$emit("getCurrentRow",rowIndex,row)
},
selectionChange(e) { // Get the selected value of the checkbox
let indexes = e.detail.index;
let datas = this.tableParam.body;
if (indexes. length) {
let newAry = [];
for (let items of indexes) {
newAry. push(datas[items]);
}
this.selectDatas = newAry;
} else {
this.selectDatas = [];
}
this.$emit("getMultipleSelection", this.selectDatas); //Get the selected multiple selection box
// console.log(e.detail.index, this.selectDatas);
},
editRow(index) {
if (index || index === 0) {
console.log('edit', this.tableParam.body[index])
this.$emit("editTable", this.tableParam.body[index])
} else {
console.log('New')
this.$emit("addTable", this.tableParam.body.length)
}
},
deleteRow(index) {
this.index = index
let self = this
uni. showModal({
title: 'Prompt',
content: 'Are you sure to delete this message? ',
success: function(res) {
if (res. confirm) {
// Execute the confirmed operation
self. $emit("delTable", index)
} else {
// perform operations after cancellation
}
}
})
},
returnParams() {
return this.tableParam.body; //Return all data in the table
}
}
}
</script>
<style lang="scss" scoped>
.table {
padding-top: 100rpx;
background-color: #fdfdffff;
width: 100%;
height: 100%;
.addFreight {
text-align: right;
}
.bodyText {
display: inline-block;
width: 80%;
}
.tdSpan {
color: #5861d0;
position: relative;
margin-right: 15rpx;
margin-left: 15rpx;
}
}
.addBtn {
float: right;
margin-bottom: 25rpx;
margin-top: 25rpx;
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
border: 1rpx solid;
border-color: #756ed0;
border-radius: 15rpx;
background-color: white;
color: #5861d0;
}
</style>