element-ui，输入框，单选框和复选框,单选框如何设置为默认选中，单选和多选，日期选择器，表单，对话框（点击，呈现一个新的页面），分页，表格

--------------------------------输入框---------------------------------------------------

资源路径：

6.输入框 - 邓瑞编程 (dengruicode.com)

6.输入框_哔哩哔哩_bilibili

clearable代表一键清空 

show-password 代表着可以隐藏和显示代码

如果我们想要定义2行的文本域，就定义2就行

max-length代表着限制长度，show-password 可以看到具体的字符限制

效果

前置搜索和后置搜索的效果：

代码：

<script setup>
import { ref } from 'vue'

const name = ref('')
const password = ref('')
const content = ref('邓瑞编程')
const url = ref('dengruicode.com')
const url2 = ref('dengruicode')
const email = ref('123456')

//const selected = ref('')
const selected = ref('2') //选中的下拉框
</script>

<template>
    <div style="width: 300px;">
        <!-- clearable 可一键清空 -->
        <h3>输入框</h3>
        <el-input v-model="name" clearable placeholder="请输入用户名" />

        <!-- show-password 可切换显示隐藏密码 -->
        <h3>密码框</h3>
        <el-input v-model="password" show-password placeholder="请输入密码" />

        <h3>文本域</h3>
        <el-input type="textarea" v-model="content" rows="2" />

        <h3>输入内容长度限制 - 输入框</h3>
        <el-input v-model="name" maxlength="10" show-word-limit />

        <h3>输入内容长度限制 - 文本域</h3>
        <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

        <h3>尺寸</h3>
        大 <el-input size="large" />
        默认 <el-input />
        小 <el-input size="small" />

        <h3>前置</h3>
        <el-input v-model="url">
            <template #prepend>https://</template>
        </el-input>

        <h3>后置</h3>
        <el-input v-model="email">
            <template #append>@qq.com</template>
        </el-input>

        <h3>前置后置</h3>
        <el-input v-model="url2">
            <template #prepend>https://</template>
            <template #append>.com</template>
        </el-input>

        <h3>前置后置扩展 - 搜索</h3>
        <el-input placeholder="请输入课程名称">
            <template #prepend>
                <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
                    <el-option label="前端" value="1" />
                    <el-option label="后端" value="2" />
                    <el-option label="服务端" value="3" />
                </el-select>
            </template>
            <template #append>
                <el-button>
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
    </div>
</template>

<style scoped></style>

----------------------------------------------------下拉框--------------------------------

8.下拉框_哔哩哔哩_bilibili

当我们切换下拉框的时候，会打印默认的值

选择服务端打印的值是C

多选

 效果展示

代码：

<script setup>
import { ref, reactive } from 'vue'

const selected = ref('2')
const selected2 = ref('')
const selected3 = ref('C')
const selected4 = ref(['1', '3'])

const data = reactive({
    options: [
        { value: 'A', label: '前端', },
        { value: 'B', label: '后端', },
        { value: 'C', label: '服务端', }
    ]
})

//回调
const selectChange = (val) => {
    console.log("selectChange:", val)
}
</script>

<template>
    <div style="width: 300px;">
        <h3>下拉框</h3>
        <el-select v-model="selected" placeholder="请选择">
            <el-option value="1" label="前端" />
            <el-option value="2" label="后端" />
            <el-option value="3" label="服务端" />
        </el-select>

        <h3>下拉框 - 事件绑定</h3>
        <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
            <el-option value="a" label="前端" />
            <el-option value="b" label="后端" />
            <el-option value="c" label="服务端" />
        </el-select>

        <h3>动态下拉框</h3>
        <el-select v-model="selected3" placeholder="请选择">
            <el-option v-for="item in data.options" :value="item.value" :label="item.label" :key="item.value" />
        </el-select>

        <h3>多选 - multiple</h3>
        <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
            <el-option value="1" label="前端" />
            <el-option value="2" label="后端" />
            <el-option value="3" label="服务端" />
        </el-select>
    </div>
</template>

<style scoped></style>

----------------------------日期选择器---------------------------------------------------

9.日期选择器_哔哩哔哩_bilibili

他默认的属性就是一个data 

不加格式的表现形式没有时分秒

打印的日期也不是我们常见的格式

对话框

<script setup>
import { ref } from 'vue'

const data = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

const add = () => {
    console.log(data.value)
}

const reset = () => {
    data.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}

//对话框
const dialog = ref(false)

const dialogClose = () => {
    console.log("关闭")
}
</script>

<template>
    <el-button @click="dialog = true">打开</el-button>

    <!-- draggable 允许拖拽 -->
    <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
        <el-form label-width="80">
            <el-form-item label="文本框">
                <el-input v-model="data.name" placeholder="请填写名称" />
            </el-form-item>
            <el-form-item label="下拉框">
                <el-select v-model="data.select" placeholder="请选择">
                    <el-option value="A" label="前端" />
                    <el-option value="B" label="后端" />
                    <el-option value="C" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="多选框">
                <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                    <el-option value="AA" label="前端" />
                    <el-option value="BB" label="后端" />
                    <el-option value="CC" label="服务端" />
                </el-select>
            </el-form-item>

            <el-form-item label="文本域">
                <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<style scoped></style>

效果展示

--------------------------------------------------分页代码模块-------------------------

page-size代表着每页显示的记录数

这里我们可以看到我们定义的3个模块，上页，下页和页码

定义的列

效果

添加border属性效果，就有了边框

表格高度的设置

    <script setup>
        import { ref } from 'vue'

        const data = ref({
            arr: [
                { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
                { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
                { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
                { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' }
            ]
        })

        //选中的复选框
        let idArr = []
        const selected = (data) => {
            //console.log("selected", data)

            idArr = [] //重置

            data.forEach((value) => {
                idArr.push(value.id)
            })

            console.log("idArr:", idArr)
        }

        //删除
        const del = () => {
            console.log("del:", idArr)
        }

        //编辑
        const edit = (index, row) => {
            console.log("index:", index, "row:", row)
        }    
    </script>

    <template>
        <h3>表格</h3>
        <el-table :data="data.arr" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>带边框表格</h3>
        <el-table :data="data.arr" border style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>设置高度固定表头</h3>
        <el-table :data="data.arr" border height="120" style="width: 800px;">
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>type="selection" 多选</h3>
        <el-table :data="data.arr" border style="width: 800px;">
            <el-table-column type="selection" width="55" />

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />
        </el-table>

        <h3>按钮</h3>
        <el-button type="primary" @click="del">删除</el-button>
        
        <el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="web" label="网站" width="300" />
            <el-table-column prop="date" label="日期" />

            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />
    </template>

    <style scoped></style>

效果展示