機能は以下の通りです↓
渡される値は以下の通り↓
data() {
return {
tableParam: {
type: "selection", //是否可以多选
loading: false,//加载状态
operate: true,//是否显示操作区域
header: [{ //表头
width: 90,
text: "位置",
value: "local",
}, {
width: 80,
text: "评分",
value: "score",
}, ],
body: [], //后端的数据
},
selectDatas: [], //复选框选中的值
}
},
mounted() {
},
onLoad(options) {
setTimeout(() => {
this.tableParam.body = [{ //模拟后端数据
local: "S1",
score: 111,
id: 1,
},
{
local: "S2",
score: 222,
id: 2
},
]
}, 1000)
},コメントを渡すコンポーネント値↓
/**
* 录音交互动效组件
* @property {Object} tableParam 表格箱管配置
* @event {Function} getCurrentRow(i,row) 获取行索引以及事件
* @event {Function} addTable 增加按钮回调
* @event {Function} editTable 编辑按钮回调
* @event {Function} delTable 删除按钮回调
* @event {Function} getMultipleSelection(rows) 获得左侧多选框所选数据
*/完成したコードは以下の通り↓
親ページ↓
<template>
<view class="table">
<view class="project-item-content">
<view class="project-item-title">测试</view>
<button type="primary" @click="getAllTableData">点击获得表格所有数据</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", //是否可以多选
loading: false, //加载状态
operate: true, //是否显示操作区域
header: [{ //表头
width: 90,
text: "位置",
value: "local",
}, {
width: 80,
text: "评分",
value: "score",
}, ],
body: [], //后端的数据
},
selectDatas: [], //复选框选中的值
}
},
mounted() {
},
onLoad(options) {
setTimeout(() => {
this.tableParam.body = [{ //模拟后端数据
local: "S1",
score: 111,
id: 1,
},
{
local: "S2",
score: 222,
id: 2
},
]
}, 1000)
},
methods: {
getCurrentRow(i, row) {
console.log("获取当前行索引", i)
console.log("获取当前行索=数据", row)
},
addTable(tableLength) {
console.log("表格长度tableLength", tableLength)
},
editTable(row) {
console.log("编辑的这一行数据row", row)
},
getMultipleSelection(selectDatas) {
console.log("复选框选中的数据selectDatas", selectDatas)
this.selectDatas = selectDatas
},
delTable(index) {
console.log("删除的这一行的索引index", index)
},
getAllTableData() {
let self = this
this.$nextTick(() => {
console.log('从父组件获取table数据', 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>テーブルコンポーネント↓
<template>
<view>
<button class="addBtn" @click="editRow()">新增</button>
<uni-table ref="table" :loading="tableParam.loading" border :type="tableParam.type" emptyText="暂无更多数据"
@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">操作</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)">修改</span>
<span class="tdSpan" @click.stop="deleteRow(index)">删除</span>
</uni-td>
</view>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
/**
* 录音交互动效组件
* @property {Object} tableParam 表格箱管配置
* @event {Function} getCurrentRow(i,row) 获取行索引以及事件
* @event {Function} addTable 增加按钮回调
* @event {Function} editTable 编辑按钮回调
* @event {Function} delTable 删除按钮回调
* @event {Function} getMultipleSelection(rows) 获得左侧多选框所选数据
*/
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);
}
}
}
}
})
},
deep: true,
}
},
mounted() {
},
methods: {
getCurrentRow(rowIndex,row) {
this.$emit("getCurrentRow",rowIndex,row)
},
selectionChange(e) { // 获取复选框选中的值
let indexs = e.detail.index;
let datas = this.tableParam.body;
if (indexs.length) {
let newAry = [];
for (let items of indexs) {
newAry.push(datas[items]);
}
this.selectDatas = newAry;
} else {
this.selectDatas = [];
}
this.$emit("getMultipleSelection", this.selectDatas); //获取多选框选中
// console.log(e.detail.index, this.selectDatas);
},
editRow(index) {
if (index || index === 0) {
console.log('编辑', this.tableParam.body[index])
this.$emit("editTable", this.tableParam.body[index])
} else {
console.log('新增')
this.$emit("addTable", this.tableParam.body.length)
}
},
deleteRow(index) {
this.index = index
let self = this
uni.showModal({
title: '提示',
content: '确认删除该条信息吗？',
success: function(res) {
if (res.confirm) {
// 执行确认后的操作
self.$emit("delTable", index)
} else {
// 执行取消后的操作
}
}
})
},
returnParams() {
return this.tableParam.body; //返回表格所有数据
}
}
}
</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>