（element&三大思想）day41javaEE基础查漏补缺-CSDN博客

本文链接：https://blog.csdn.net/weixin_44310276/article/details/122552122

element&三大思想

1.shift+enter：控制台换行，js代码断点：debugger
2.监视表达式：
3.先引入文件vue,再element-index.js,index.css
4.element组件：
5.索引，本行具体数据
6.ref=“form”,相当于id(),表的标识。
7.每个HTML界面做element css和js文件就只需要引入一次嘛?
8.get的url里面可以传数组:ids={,,,}。
9.删除后不需要再清空数组了
10.注意：抽取之后，不要再重写service方法了
11.md:ctrl+shiit+] 创建代码块儿。
12.如果创建对象异常，catch里抛异常对象
13.spring工厂模式：单例(静态代码块)+对象池（map）
14.静态代码实现单例模式：
15.控制台怎么搜索快捷键：ctrl+f
16.三大思想
17.enumeration接口：
18.element是咋封装的？

1.shift+enter：控制台换行，js代码断点：debugger

2.监视表达式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22aM3c95-1642442636341)(问题.assets/1642336328324.png)]

3.先引入文件vue,再element-index.js,index.css

 <!--1.先引入vue的js文件,在引入elment的js文件和css文件-->
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

一定要注意顺序。

思路：创建vue对象,复制代码，修改一下。

4.element组件：

1)栅格化：span，多于24会换行，少于24或负数会留空白,

<!--
        el-row: 页面中的一行
        el-col: 页面中的一列
            element默认会把屏幕每行分成24份,span中用于声明当列占用多少份
            :span="24" 一列占用的宽度 占用24份
            注意:
                无论每行中分出多少列,总和必须是24
    -->
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

2)from表格

 <!--
        el-table: elementl里边的表格
            :data="tableData" 表示要渲染的数据,和下边vue对象中data中tableData形成属性绑定
        el-table-column 一列
            prop="date":代表列中要渲染的具体的数据
    -->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    -----------
    //index:当前行(编辑,删除)的索引
            //row 当前行的具体的数据
            handleEdit(index, row) {
                //console.log(index, row);
                //获取行中某一个属性
                console.log(row.name);
            },
             //复选框选中数据变化事件
            handleSelectionChange(val) {
                //val:传递过来选中的所有的数据
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            }

3)表单

 <!--
        el-form: element中的表单
            ref="form" 声明表的标识(id属性)
            :model="form" 用于和data中form进行双向绑定
        el-form-item 表单项
            label="活动名称" 表单项的名称
        el-input 具体的表单的标签 主要: input select text-area
            v-model="form.name" 具体双向绑定
    -->
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

4)对话框：

<!--
        按钮有一个鼠标点击事件
            设置dialogFormVisible = true 显示对话框
    -->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
------
<!--
        el-dialog 一个对话框
            title="添加学生" 对话框的标题
            :visible.sync="dialogFormVisible" 控制当前对话框是否显示
                false:隐藏
                true:显示
    -->
    <el-dialog title="添加学生" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="学生姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

5.索引，本行具体数据

index:当前行(编辑,删除)的索引
            //row 当前行的具体的数据
            handleEdit(index, row) {
                //console.log(index, row);
                //获取行中某一个属性
                console.log(row.name);
            },