vue个人信息页模板,vue详情页面
这篇文章主要为大家详细介绍了某视频剪辑软件前端信息详情页模板梳理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件前端信息详情页模板的梳理，供大家参考，具体内容如下
前言：
自己总结方便自己用的，觉得有用可以参考使用，欢迎留言提出改进意见。
1.HTML部分：
模板xmlns:El-form-item= http://www。w3。 org/1999/XHTML
El-form ref= form :model= form :rules= rules label-width= 100px
el-page-header content=详情页主题@back=goBack /
el-row style=margin-top: 30px
！-基本输入框-
el-col :span=8
El-表单-项目标签=属性1 prop=name1
埃尔-输入v-model=形式。模型1 placeholder=提示输入内容：readonly=status/
/El-表单-项目
/el-col
！-基本单选框-
el-col :span=8
El-表单-项目标签=属性2 prop=name2
El-select v-model= form。模型2 class= whiteSelectBg placeholder=提示单选style= width:100%；disabled=status
埃尔选项标签=选项1 值=1 /
埃尔选项标签=选项 2 值=2 /
/el-select
/El-表单-项目
/el-col
！-基本多选框-
el-col :span=8
El-表单-项目标签=属性3 placeholder= prop= subjectId
El-select v-model= form。模型3“多个占位符=”提示多选style= width:100%；@change=getOption
El-option v-for= options in options :key= option。 id :label=选项。 name :value=选项。id /
/el-select
/El-表单-项目
/el-col
/el-row
！-上传文件-
el-row
El-upload:disabled= status action=文件上传的控制器路径：on-success="上传成功":before-upload="上传前":show-file-list="false "
el-col :span=20
El-表单-项目标签=文件类型名prop=文件名
El-input v-model= form。文件名 placeholder=请上传实验指导，可以上传doc，docx，pdf等文档格式只读style= width:750 px；/
/El-表单-项目
/el-col
el-col :span=4
El-button type= primary icon= El-icon-upload style= margin-left:25px；:disabled=status 上传文件/el-button
/el-col
/El-上传
/el-row
！-数据表格-
el-row
el-col :span=24
埃尔-表单-项目
El-table v-loading= list loading :data= form。表列表边框适合突出显示-当前行样式=宽度：100%； b-edit @ row-click= table change
El-table-column align= center :label=序号type=index width=80/
！-普通数据格-
el-table-column :label=表头1 align=center 最小宽度= 100像素
模板插槽范围="{ row } "
span{{ row.id }}/span
/模板
/El-表格-列
！-可编辑数据格，根据数据状态变换输入还是只显示-
el-table-column :label=表头2 align=center 最小宽度= 100像素
模板插槽范围="{ row } "
El-input v-if= row。看到“ref=”表输入“v-model=”行。name auto focus= auto focus maxlength= 5 @ change= table edit(row .$index，row) /
span v-else{{ row.name }}/span
/模板
/El-表格-列
！-操作按钮格-
埃尔-表格-列：标签= 操作align=居中最小宽度= 100像素
模板插槽范围="{ row } "
El-button size= mini type= danger @ click= delete(row。id)删除/el-button
/模板
/El-表格-列
/el-table
/El-表单-项目
/el-col
/el-row
！-基础动态表单区块-
El-card class= box-card shadow= never style= margin-left:100 px；
div slot= header class= clear fix
跨度区块名/span
El-button type= primary v-if= addBt style= margin-left:700 px；:disabled= status @ click= add card 新增/el-button
/div
div style= text-align:center；
el-row v-for=(card，index) in cards :key=card.key
el-col :span=8
el-form-item :label=属性1
！-根据需求自己选择放输入框还是单选多选框-
/El-表单-项目
/el-col
el-col :span=8
el-form-item :label=属性2
！-根据需求自己选择放输入框还是单选多选框-
/El-表单-项目
/el-col
el-col :span=8
El-button:disabled= status @ click。防止=删除卡(卡)删除/el-button
El-button:disabled= status @ click= add card 新增/el-button
/el-col
/el-row
/div
/电子名片
el-row
El-form-item style= text-align:center；边距-顶部：30px左边距：-30px
El-button type= primary @ click= submit 提交/el-button
el-button @click=reset(form )重置/el-button
el-button @click=goBack 返回/el-button
/El-表单-项目
/el-row
/el格式
/模板
2.JS部分：
脚本
从@/directive/waves //waves指令导入波形，点击产生水波纹效果，在标签中添加v波
从" @/组件/分页"//导入分页分页组件
导出默认值{
data() {
返回{
id: ，
选项：[],
guideFileIsChange:" "，
指南文件：{文件： ,名称： },
listLoading: false，
添加Bt:没错，
表单：{
模型1: ,
模型2: ,
模型3: [],
文件名： ,
表列表：[{
id: ，
名称： ,
看过：假的，
},{
id: ，
名称： ,
看过：假的，
}]
卡片：[],
},
},
规则：{
模型1: [{
必填：真，
消息： 请输入内容
}],
模型2: [{
必填：真，
消息： 请选择选项
}],
模型3: [{
必填：真，
消息： 请选择选项
}],
文件名:[{
必填：真，
消息： 请上传文件
}],
},
},
//页面初始化
已创建(){
//获取上一个页面传递过来的参数，id，状态等。
this.id=this .$route.query.id
this.action=这个. route.query.action
},
方法：{
//跳转返回指定的页面
goBack() {
这个100美元商店。状态。标签视图。已访问的视图。拼接(这个.$ store。状态。标签视图。已访问视图。findIndex(item=item.path===
这个1)中
这个. router.push({
路径： 跳转的页面路径
})
},
getOption() {
//获取动态选项框的数据
const list=[]
this.options=list
},
//上传文件
上传成功(res，file) {
this.guideFileIsChange=1
this.guideFile.file=file.raw
这个。指南文件。名称=文件。生的。名字
这个。形式。文件名=文件。生的。名字
},
//实验指导书的信息
上传前（文件){
setTimeout(()={
这个消息({
时长：1600,
类型："成功",
消息： 上传文件成功!
})
})
返回真实的
},
tableChange() {
console.log(点击表格行触发的操作)
},
//触发出现输入框
表格编辑(行$索引，第行){
对于(这个。表格列表中的常量索引){
if (row.id！==this.tableList[index].id) {
this.tableList[index].见过=假
}否则{
this.tableList[index].见过===假的？this.tableList[index].见过=真：这个。表格列表[索引].见过=假
}
}
if (row.seen===true) {
这个. nextTick(()={
这个. refs.tableInput.focus()
}, 100)
}
},
删除(id) {
这个. $确认(确认删除这一条信息？, 确认删除？, {
distinguishCancelAndClose: true，
confirmButtonText:确定，
取消按钮文本： 取消
}).然后(()={
对于(设I=0；我这个。表列表。长度；i ) {
if (id===this.tableList[i].id) {
this.tableList.splice(i，1)
}
}
这个message.success(删除成功!)
}).catch(action={})
},
addCard() {
this.cards.push({key1: value1，key2: value2})
this.addBt=false
},
删除卡（卡){
常量索引=this。卡片。(卡片的)索引
如果（索引！==-1) {
this.cards.splice索引，1)
} if (this.cards.length===0) {
this.addBt=true
}
},
提交(){
console.log(提交!)
},
重置（表单名){
这个。$ refs[表单名]。重置字段()
},
},
}
3.css部分：
//这是修改后的输入框只读样式。
风格。whiteSelectBg。El-input . is-禁用。el输入_ _内部{
背景色：白色；
颜色：# 606266；
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。