1.ref 定义各种类型的数据
const title = ref<string>('');
const width = ref<number>(800);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const rolesList= ref([] as any[])
2.父组件给子组件传值 defineProps
父组件
<template>
// 省略了一些无关紧要的代码
// 调用了子组件<server-select>
<div>
<server-select v-model:value="servers" :servers="sids" />
</div>
</template>
<script lang="ts" setup>
const servers = ref()
// 要把这个变量传给子组件
const sids = ref('12')
</script>
<template>
子组件
// 绑定了父组件传过来的值
<n-select
v-model:value="$props.sids"
:multiple="true"
:options="options"
placeholder="请选择主机">
</n-select>
</template>
<script lang="ts" setup>
/* import { useVModel } from '@vueuse/core'
interface Props {
value: string[]
setDefault?: boolean // 是否设置默认值
alarm: boolean
}
const props = withDefaults(defineProps<Props>(), {
setDefault: false,
alarm: false,
})
const method = useVModel(props, 'value')
*/
// 声明一个props变量接受父组件传的变量
const props = defineProps({
sids: String
})
</script>
3.vue3 路由跳转传参接参
import { useRouter, useRoute} from 'vue-router'
const router = useRouter() //传参
router.push({ path: '/system/qualification' , query: record})
router.push({ name: 'sys' , params: record})
const route = useRoute() //接参
route.query
route.params
onMounted
onMounted(()=>{
console.log("测试",route)
})
useTable 配置
const [registerTimeTable] = useTable({
title: '钻孔采样信息',
columns: refundTimeTableSchema,
api: list,
pagination: true,
dataSource: refundTimeTableDatas,
// 是否显示操作列
showActionColumn: true,
showIndexColumn: true,
scroll: { y: 400 },
// 操作列
actionColumn: {
width: 120,
title: '操作',
//是否锁定操作列取值 right ,left,false
fixed: false,
dataIndex: 'action',
slots: { customRender: 'action' },
},
});