山东大学项目实训记录(五)——表格功能完善与vue插入外部html文件

表格还有我负责的最后一项表格数据修改的功能

                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
		//编辑信息时的弹出窗
        <el-dialog title="编辑" v-model="editVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="身份证号">
                    <el-input v-model="form.id_number"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="form.uname"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="form.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="居住">
                    <el-input v-model="form.current_address"></el-input>
                </el-form-item>
                <el-form-item label="治疗情况" prop="allergic">
                  <el-radio-group v-model="form.allergic">
                    <el-radio label="治疗完成"></el-radio>
                    <el-radio label="治疗中"></el-radio>
                  </el-radio-group>
                </el-form-item>
                  <el-form-item label="手机号">
                    <el-input v-model="form.phone"></el-input>
                  </el-form-item>
                </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>



        // 表格编辑时弹窗和保存
        const editVisible = ref(false);
        let form = reactive({
          id_number:"",
          uname:"",
          sex:"",
          age:"",
          current_address:"",
          phone:"",
          allergic:"治疗中",
          //date:"",
        });
      let idx = -1;
        const handleEdit = (index, row) => {
            idx = index;
            Object.keys(form).forEach((item) => {
                form[item] = row[item];
            });
            editVisible.value = true;
        };
        const saveEdit = () => {
            editVisible.value = false;
            ElMessage.success(`修改第 ${idx + 1} 行成功`);
            Object.keys(form).forEach((item) => {
                tableData.value[idx][item] = form[item];
            });
        };

此外，今天还收到了小组其他成员做的三维模型展示需要将其嵌套进我们的页面中

将html和所有的依赖文件放入src平级的static文件夹

  <div id="show">
    <iframe src="static/buju.html"  style="width:100%;height:90%;position:absolute;"></iframe>
  </div>

	//自适应大小
    function reinitIframe(){
      var iframe = document.getElementById("test");
      try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.min(bHeight, dHeight);
        iframe.height = height;
        /* console.log(iframe.contentWindow);
         console.log(bHeight,dHeight);*/
      }catch (ex){}
    }
    setInterval(reinitIframe,100);

在网上找了很久vue3.0引入外部html文件最方便的方法应该就是这种，但是实际展示并不理想，所以需要添加一些自适应大小的代码

此外，对小组成员的设计添加了按钮收起和展开的功能

<div id="header">
    <span id="2">
        <button type="button" onclick="(showElement(1),hideElement(2))">展开</button>>
    </span>
    <span id="1" style="DISPLAY:none">
        <button type="button" onclick="reset()">重置方向</button>
        <button type="button" onclick="axis()">坐标轴显示/消失</button>
        <button type="button" onclick="up()">上颚消失/显示</button>
        <button type="button" onclick="low()">下颚消失/显示</button>
        <button type="button" onclick="spin()">自动旋转</button>
        <button type="button" onclick="speedup()">旋转加速</button>
        <button type="button" onclick="speedown()">旋转减速</button>
        <button type="button" onclick="(showElement(2),hideElement(1))">收起</button>>
    </span>
</div>

function hideElement(id) {
    document.getElementById(id).style.display = "none";
}

function showElement(id) {
    document.getElementById(id).style.display = "";
}