1.我的問題使用了一個table 表格,在表格中設置倆個按鈕
最后做出來的效果
<template><div><h1>測試文件</h1><!-- 表格 --><n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" /><!-- 彈出框 --><n-modal v-model:show="showModal" :mask-closable="false" preset="dialog" title="確認" content="你確認"positive-text="確認" negative-text="算了" @positive-click="tanVerify" @negative-click="tanCancel" /></div>
</template><script>import {h,defineComponent,ref} from "vue";import {NButton,createDiscreteApi,NDataTable,NModal} from "naive-ui";const createColumns = ({updataPlay}) => {return [{title: "No",key: "no"},{title: "Title",key: "title"},{title: "Length",key: "length"},{title: "Action",key: "actions",render(row) {return [h(NButton, {strong: true,tertiary: true,size: "small",onClick: () => updataPlay(row)}, {default: () => "修改"}),h(NButton, {strong: true,tertiary: true,size: "small",onClick: () => deletePlay(row)}, {default: () => "刪除"})]}}];};const data = [{no: 3,title: "Wonderwall",length: "4:18"},{no: 4,title: "Don't Look Back in Anger",length: "4:48"},{no: 12,title: "Champagne Supernova",length: "7:27"}];export default defineComponent({components: {NDataTable,NButton,NModal},setup() {// 這里獲取參數的方式const showModalRef = ref(false);const message = createDiscreteApi(["message"]).message;return {// 彈出框showModal: showModalRef, tanCancel() {message.success("Cancel");showModalRef.value = false;},tanVerify() {message.success("Submit");showModalRef.value = false;},data,columns: createColumns({updataPlay(row){message.info(`Play ${row.title}`);showModalRef.value = true;}}),pagination: false};}});
</script>
彈出框如何做的
需求這倆個出現這倆個按鈕
?
如何彈出內容
主要就是修改這倆個內容
我修改的時候,找不到彈出框的定義的變量,定義了變量總是出了問題
const v = falsetest(){v = true // 這里出現的問題}
最后發現里面有一個定義的變量可以獲取到其中的內容
const message = ref(false);test(){message.value = true ; //可以獲取到其中的直,直可以修改
}