93 lines
1.6 KiB
Vue
93 lines
1.6 KiB
Vue
<template>
|
|
<uni-popup ref="previewPopupRef" class="popup">
|
|
<view>
|
|
<Table :columns="columns" :data="tableData" >
|
|
<template #cell="{ row, column }">
|
|
<!-- 自定义 age 列 -->
|
|
<template v-if="column.key === 'age'">
|
|
<view @click="test" :style="{ color: '#f00' }">
|
|
{{ row.age }}
|
|
</view>
|
|
</template>
|
|
<!-- 默认渲染 -->
|
|
<template v-else>
|
|
{{ row[column.key] }}
|
|
</template>
|
|
</template>
|
|
|
|
<!-- 操作列插槽 -->
|
|
<!-- <template #actions="{ row, index }">
|
|
<button type="primary" size="mini" @click="handleDelete(row, index)">删除</button>
|
|
</template> -->
|
|
</Table>
|
|
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
computed,
|
|
} from 'vue'
|
|
import Table from './table.vue'
|
|
// 表格列配置
|
|
const columns = ref([{
|
|
title: '姓名',
|
|
key: 'name',
|
|
width: '120rpx'
|
|
},
|
|
{
|
|
title: '年龄',
|
|
key: 'age',
|
|
width: '120rpx',
|
|
slot: 'age'
|
|
},
|
|
{
|
|
title: '地址',
|
|
width: '180rpx',
|
|
key: 'address'
|
|
}
|
|
])
|
|
|
|
// 表格数据
|
|
const tableData = ref([{
|
|
name: '张三',
|
|
age: 25,
|
|
address: '北京市'
|
|
},
|
|
{
|
|
name: '李四',
|
|
age: 30,
|
|
address: '上海市'
|
|
},
|
|
{
|
|
name: '王五',
|
|
age: 28,
|
|
address: '广州市'
|
|
}
|
|
])
|
|
const previewPopupRef =ref()
|
|
const openFeedback = (status) => {
|
|
if (status) {
|
|
previewPopupRef.value.open('bottom')
|
|
} else {
|
|
previewPopupRef.value.close()
|
|
}
|
|
}
|
|
const open = (data) => {
|
|
openFeedback(true)
|
|
}
|
|
const close = () => {
|
|
openFeedback()
|
|
}
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |