<template>
<view class="container">
<!-- 顶部操作栏 -->
<view>
<up-row gutter="5">
<up-col span="3">
<up-button type="success" text="新增" shape="circle" @click="handleAdd" ></up-button>
</up-col>
<up-col span="3">
<up-button type="warning" text="修改" shape="circle" @click="handleEdit" ></up-button>
</up-col>
<up-col span="3">
<up-button type="error" text="删除" shape="circle" @click="handleDelete" ></up-button>
</up-col>
</up-row>
</view>
<view>
<u-table2 :data="tableData" :columns="columns" stripe border @row-click="handleRowClick"/>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
const RowId = ref('')
const selectedRow = ref(null)
const tableData = ref([])
const columns = ref([
// {
// type: 'selection', width: '30px',
// },
{
title: 'ID',
key: 'id',
width: '80',
align: 'center'
},
{
title: '姓名',
key: 'name',
align: 'center'
},
{
title: '年龄',
key: 'age',
align: 'center'
},
{
title: '性别',
key: 'gender',
align: 'center'
},
{
title: '联系电话',
key: 'phone',
align: 'center'
}
])
const handleRowClick = (row, index) => {
selectedRow.value = row
console.log('选中行:', row, '索引:', index)
}
const handleConfirm = () => {
uni.showToast({
title: '操作成功',
icon: 'success'
})
}
const handleEdit = () => {
if (!selectedRow.value) {
uni.showToast({
title: '请先选择一行数据',
icon: 'none'
})
return
}
console.log('编辑:', selectedRow.value)
}
const handleDelete = () => {
if (!selectedRow.value) {
uni.showToast({
title: '请先选择一行数据',
icon: 'none'
})
return
}
uni.showModal({
title: '确认删除',
content: 确定要删除 ${selectedRow.value.name} 吗?,
success: (res) => {
if (res.confirm) {
// 执行删除逻辑
console.log('删除:', selectedRow.value)
}
}
})
}
const handleAdd = () => {
console.log('新增数据')
}
onMounted(() => {
tableData.value = [
{ id: 1, name: '张三', age: 25, gender: '男', phone: '13800138000' },
{ id: 2, name: '李四', age: 30, gender: '女', phone: '13900139000' },
{ id: 3, name: '王五', age: 28, gender: '男', phone: '13700137000' },
{ id: 4, name: '赵六', age: 32, gender: '女', phone: '13600136000' }
]
})
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20rpx;
box-sizing: border-box;
}
</style>