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 ; //可以获取到其中的直，直可以修改
}
