css

shj

2022-07-18 9f4e449a4159c9debf5520a797393bd5df2e5908

 src/views/goalManagement/targetEscalation/component/Dailog.vue

@@ -1,10 +1,6 @@
<template>
     <el-dialog
    v-model="dialogVisible"
    title="记录"
    width="50%"
    draggable
  >
   <el-dialog v-model="dialogVisible" :fullscreen="full" title="记录" width="50%" draggable>
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column align="center" label="序号" type="index" width="80"/>
    <el-table-column align="center" prop="date" label="责任部门"/>
@@ -18,29 +14,39 @@
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent,reactive,ref} from 'vue'

import { defineComponent, reactive, ref } from 'vue';
import { FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref(false)
        const tableData=ref()
      const dialogVisible = ref(false);
      const tableData = ref();
        const openDailog=(data:any)=>{
            dialogVisible.value=true
            tableData.value=data
         dialogVisible.value = true;
         tableData.value = data;
      };
      //全屏
      const full = ref(false);
      const toggleFullscreen = () => {
         if (full.value == false) {
            full.value = true;
         } else {
            full.value = false;
        }
      };
        return{
        dialogVisible,
        tableData,
        openDailog
        }
         openDailog,
         full,
         toggleFullscreen,
         FullScreen,
      };
    },
})
});
</script>