问题①. 坐标系 input 的 提示文字:
方法①:最简单的html 的title属性实现
效果图如下:
方法②:
return h(
'Tooltip',
{
style:{},
props: {
content: x + `, ` + y,
placement:"top",
}
},
[h('Input', {
props: {
value: value
},
on: {
change: (e) => {
console.log(Xcode, Ycode, value, e.target.value);
this.record.map(v => {
if (v.priorityType === Xcode && v.broadcastinfoType === Ycode) {
v.level = level
} else {
this.record.push({
'priorityType': Xcode,
'broadcastinfoType': Ycode,
'level': e.target.value
})
}
})
}
}
})]
)
方法③: 通过concent: 属性定义
外面套了一层:
效果图如下:
问题②: 列表显示要求是name, 新增时传的是id,
线上效果图:
处理思路:
找到列表所在的数组进行遍历,但是这样会只显示第一条数据,怎么办呢?
①:套循环遍历就可以了;(简单的方法如下:)
②:复杂的情况, 新增的时候 传过去的是id, 保存到数据库里也是id, 需要tab 显示name
这个情况下,需要在 条件查询的接口做操作, 条件选中那的那个列表,加载出来的,在 接口里做,
循环遍历, 套循环,根据id 把name 查找出来:
问题③. iview 里面 接口请求前需要做一下验证:
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
问题④:如果后台接口没做分页的字段这句没用:
问题⑤: 如果你的列表显示用的是数组,后台返回给你的是对象,怎么处理?
问题⑥:
解决办法:name:不要起一样就ok
问题⑦: 页面首次进来要求按 select 默认的条件 加载列表; 然后 新增后有一个 所属线路编号(tccLineId): 赋值给 查询里面的变量lineFault
实现方法:
首先在data 里面 给lineFault : ‘01’;
其次保存成功后需要子 传父时:
this.lineFault = data.tccLineId; //保存后 把data.tccLineId 的值赋给lineFault 调查询的接口
然后在调查询的接口:
this.loadListData ();// 查询指定线路
具体代码:
问题8: 页面数据传给后台是是自定义的 select 传给后台是id, 要求tab 显示name;
方法:
1.在增加的时候, 根据id 查name 把name 也带过去存起来,
// 根据opens Id查找对应的 name
this.opens.map(v =>{
if(this.formAddData.openMark === v.openMark){
this.formAddData.openName = v.openName
}
})
2. 在查询的接口时循环遍历一次, 根据id 取出name;
tab栏用的变量可以用name变量 ;
//根据id 查name
this.historyData.map(v=>{
this.opens.map(e=>{
if(v.openMark === e.openMark){
v.openName = e.openName
}
})
})
具体代码如下:
问题9:iview 表单验证总结:
iview表单验证的步骤:
第一步:给 Form 设置属性 rules :rules
第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步:注意:Form标签里面是 :model
第四步:注意:在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
第五步:在操作保存按钮时,添加方法,对整个表单进行校验,参数为检验完的回调,会返回一个 Boolean 表示成功与失败。
<Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate">
<FormItem label='合同编号:' prop="contractNo">
<Input placeholder="请输入合同编号" v-model='contractForm.contractNo'></Input>
</FormItem>
//data里面,写验证
ruleValidate: {
contractNo:[
{ required: true, message: '合同编号不能为空', trigger: 'blur' },
],
}
//methods里面,写方法
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});
</Form>
一般在提交时用:
this.$refs[name].validate((valid) => {
if (valid) {
}else {
this.$Message.error('Fail!');
}
});
注意事项:
iview进行表单验证select时候验证失败的问题:
- 用iview自带的表单验证select标签的时候,一直验证不通过,因为iview默认校验数据类型为String,而我的select用的value是number类型的
ruleValidate: {
customer:[
{ required: true, message: '客户名称不能为空', trigger: 'blur',type:'number'},
],
}
- iview进行表单验证时间日期验证失败的问题:
- 和下拉框一样,日期的类型是data
- 时间控件加上value-format="yyyy-MM-dd"
ruleValidate: {
advance:[
{ required: true, message: '预送达时间不能为空', trigger: 'change' ,type: 'date'},
],
}
iview进行多重验证的写法:
- 多重验证包括第一要验不能为空,第二要验证限制的一些长度,写正则表达式等
ruleValidate: {
goodsNum: [
{ required: true, message: '数量不能为空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
],
}
. 密码验证 和 身份证号码 手机号 验证步骤如下:
//判断新增的规则
addRules: {
password: [
{ required: true, validator: validatePass, trigger: 'change' },
],
rpassword: [
{ required: true, validator: validatePassCheck, trigger: 'change' }
],
idCard: [
{ validator: validateIDCard, trigger: 'change' }
],
phone: [
{ validator: validatePhoneNumber, trigger:'change'}
],
}
data(){
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('密码不能为空!'));
} else if ( !/^(\w){6,20}$/.test(value)) {
callback(new Error('只能输入6-20个字母、数字、下划线 !'));
} else {
// if (this.formAddData.rpassword !== '') {
// // 对第二个密码框单独验证
// this.$refs.formAddData.validateField('passwdCheck');
// } else {
// callback();
// }
callback();
}
};
const validatePassCheck = (rule, value, callback) => {
if (value === '') {
callback(new Error('请重新输入密码!'));
} else if (value !== this.formAddData.password) {
// console.log(this.formAddData.rpassword );
callback(new Error('两次密码不一致!'));
} else {
callback();
}
};
const validateIDCard = (rule, value, callback) => {
if(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {
callback(new Error('请输入18位正确身份号码!'))
} else {
callback();
}
};
const validatePhoneNumber = (rule, value, callback) => {
if (!/^1[34578]\d{9}$/.test(value)) {
callback(new Error('请输入正确的手机号!'))
} else {
callback();
}
};
},
问题10: iview 或者手动将各个属性置空
this.$refs[name].resetFields(
this.formAddData = {
tccStationId: null,
stationSname: null,
stationFname: null,
stationEname: null,
tccLineId: this.formAddData.tccLineId,
paProtocolId: this.formAddData.paProtocolId,
tccLineName: this.formAddData.tccLineName,
subareaNum: this.formAddData.subareaNum,
openMark: this.formAddData.openMark,
changeLineNum: this.formAddData.changeLineNum,
changeLineName: this.formAddData.changeLineName,
});
问题11: VUE截取字符串
let str = 'abcdef';
str = str.slice(0);//返回整个字符串 abcdef
str = str.substring(0);//返回整个字符串 abcdef
str = str.substr(0);//返回整个字符串 abcdef
// 使用一个参数
str = str.slice(2);//截取第二个之后所有的字符 cdef
str = str.substring(2);//截取第二个之后所有的字符 cdef
str = str.substr(2);//截取第二个之后所有的字符 cdef
// 使用两个参数
str = str.slice(2,4);//截取第二个到第四个之间的字符 cd
str = str.substring(2,4);//截取第二个到第四个之间的字符 cd
str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符 cdef
// 使用两个负数
str = str.slice(1,-3);//截取第二个到第四个之间的字符 bc
str = str.substring(1,-3);//截取第二个到第四个之间的字符 a #负数转换为0
str = str.substr(1,-3);//不能为负数,若强行传递负数,会被当成0处理 ' ' #负数转换为0
console.log(str)
// 截取一个字符串里里面的,第2个 , 后面的内容; data里面 第2个 “ ,” 后面的内容
1.简单实例:
let str = "zheng-shize-zsz";
let one; // 第二个横杠前内容
let two; // 第二个横杠后内容
let first = str.indexOf("-") + 1; // 从第一个横杠算起(+1表示不包括该横杠)
let kong = str.indexOf(" ", first); // 第一个横杠后的第一个空格
let heng = str.indexOf("-", first); // 第一个横杠后的第一个横杠(即第二个横杠)
if (heng == -1) {
one = str.substring(0, kong);
two = str.substring(kong).substring(1, str.length);
} else {
one = str.substring(0, heng);
two = str.substring(heng).substring(1, str.length);
}
console.log(one);
console.log(two);
2.复杂实例:
console.log( '返回2', message.data);
let message.data = MessageEvent {isTrusted: true, data: "0x01000102,01,{"time":"20190413101506","type":"故障","deviceid":"99010104"}",
问题12:根据输入的lineid 后面+00 拼接为4位数 与 nodeid 第(5,8)的4位数 判断,相等后赋值
相当于2级联动; 第一个是输入框,第二个是option 选择框 , 输入完第一个之后,第二个会自动出来值;
// let str = '01010100100000001';
// str = str.slice(4,8);
//截取第4个到第8个之间的字符 0100
补充一下:如果上面的输入框输入的值清空了,第2想的值没清空,还存在;
处理方法:
问题13: iview 里面的
1. 禁用关闭 #
可以禁用关闭和遮罩层关闭。
只需要做如下操作:
<Modal
:closable="false"
</Modal>
2. 拖拽移动 #
设置属性 draggable
,对话框可以进行拖拽移动。
只需要做如下操作:
<Modal
draggable scrollable
</Modal>
问题14:js数组操作-删除首项、删除尾项、头部添加项、尾部添加项
数组删除第一项,数组删除最后一项,在数组头部添加项,在数组尾部添加项,数组排序等相关操作!
问题15: 登录进来,会判断用户属于哪个节点的类型, 用这个节点的类型作为参数去请求接口,
1. 如果是tcc 接口返回既有 线路,又有车站。
2. 如果是 occ 接口返回的只有 车站
3. 如果是 sc 接口返回什么都没有
下面是模拟的 “ 树” 结构;
代码如下:
<template>
<!-- 广播区设置 -->
<div>
<Row>
<Col span="4">
<Tree :data="data1" show-checkbox @on-check-change="checked_change"></Tree>
</Col>
<Col span="20">
<div class="listfile">
<Row>
<Col span="24">已选节点类型</Col>
</Row>
<Table border ref="selection" :columns="historyColumns" :data="historyData" @on-select-all='selectTable' @on-select='selectTable' @on-select-cancel='selectTable'></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="dataCount" :page-size="pageSize" show-total :current="currentPage" @on-change="changepage"></Page>
</div>
</div>
</div>
</Col>
</Row>
</div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
data () {
const letter = this.$store.state.parameter.deserve; //字典
return {
data1: [
{
title: '1号线',
expand: true,
children: [
{
title: '预留01站'
},
{
title: '预留02站'
},
{
title: '预留03站'
},
{
title: '预留04站'
},
{
title: '预留05站'
}
]
},
{
title: '2号线',
expand: true,
children: [
{
title: '西直门站'
},
{
title: '车公庄站'
},
{
title: '阜成门站'
},
{
title: '复兴门站'
}
]
},
],
ajaxHistoryData:[],
dataCount:1,// 初始化信息总条数
currentPage:1, //当前页
pageSize:10,// 每页显示多少条
below: 0, //下一页或者上一页的第一项索引值
historyColumns: [
{type: 'selection',width: 60,align: 'center'},
{title: '设备名称',key: 'deviceName',width: 100,align: 'center'},
{title: '设备IP',key: 'ip',width: 150,align: 'center'},
{title: '设备状态',key: 'status',width: 120,align: 'center'},
{title: '时间',key: 'dateTime',align: 'center'},
{title: '操做',key: 'action',width: 200,align: 'center',fixed:'right',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary', size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// console.log(params.row)
// //这里新显示一个模态
// this.$refs.detailDevice1.modal3 = true;
// // 拿到这行的数据,再把它传给子组件
// this.detailDeviceData = params.row;
}
}
}, '详情'),
h('Button', {
props: {
type: 'primary', size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// //这里新显示一个模态
// // console.log(params.row)
// // 拿到这行的数据,再把它传给子组件
// this.edtor(params.row);
}
}
}, '编辑'),
h('Button', {
props: {
type: 'error', size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// let question = confirm("您确认删除?");
// if(question != "0"){
// let data = {deviceId: params.row.deviceId,userId: this.$store.state.user.uid,userName: this.$store.state.user.name}
// this.$axios({
// method: 'post',
// data: this.$qs.stringify(data),
// headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
// url: this.baseURL + '/device/DeviceInfo/delete_Device',
// })
// .then((res)=> {
// if(res.status == "200"){
// console.log(this.historyData);
// if (res.data.code === "0") {
// this.historyData.splice(params.index, 1); //删除数据
// this.dataCount = this.dataCount - 1;
// this.$Message.info('删除成功!');
// }else {
// alert(res.data.msg)
// }
// }
// })
// .catch((error)=> { })
// }
}
}
}, '删除'),
])
}
}
],
historyData:[],
testData:[{ "deviceName":"测试001","ip":"192.168.001","status":"未开启","dateTime":"2019-04-11 00:00:00"}],
}
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status); //全选
},
selectTable(data){ //列表左侧checkbox
this.selectData = data;
// console.log(data);
},
// 获取历史记录信息
handleListApproveHistory(){
// 保存取到的所有数据
this.ajaxHistoryData = this.testData;
this.dataCount = this.testData.length;
// 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示
if(this.testData.length < this.pageSize){
this.historyData = this.ajaxHistoryData;
}else{
this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
}
},
//index当前页码
changepage(index){
this.currentPage = index;
let sessionId = Cookies.get('status');
},
checked_change(data) {
console.log(data)
}
},
created(){
this.handleListApproveHistory();
// console.log("线路和车站:",this.$store.state.parameter.lineStation);
let result = [
{
"line": {
"lineId": "string",
"lineName": "13号线",
"lineSname": "string",
"manageNodeid": "string",
"paProtocolId": "string",
"stationEName": "string",
"stationNum": 0,
"stationSName": "string"
},
"stationInfo": [
{
"changeLineName": "string",
"changeLineNum": 0,
"openMark": 0,
"paProtocolId": "string",
"stationEname": "string",
"stationFname": "string",
"stationSname": "立水桥",
"subareaNum": 0,
"tccLineId": "13号线",
"tccLineName": "string",
"tccStationId": "string"
},
{"stationSname": "立水桥2",},
{"stationSname": "立水桥3",},
{"stationSname": "立水桥4",},
]
},
{
"line": {
"lineName": "8号线",
},
"stationInfo": [
{"stationSname": "霍营",},
{"stationSname": "霍营2",},
{"stationSname": "霍营3",},
]
}
];
let tree = [];
result.map(v => {
let _tempTree = {};
_tempTree.title = v.line.lineName;
_tempTree.expand = true;
// _tempTree.checked = true;
_tempTree.children = [];
v.stationInfo.map(station => {
let _tempStation = { 'title': station.stationSname, 'lineId': v.line.lineName};
_tempTree.children.push(_tempStation)
})
tree.push(_tempTree)
})
this.data1 = tree
},
mounted(){},
}
</script>
<style>
</style>
</script>
<style>
</style>
问题16: vue里面使用websocket 跟后端建立连接,实时更新 列表数据:
在 Create 里面写:
问题17:vue实现简单表格组件
<template>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">用户管理</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for ="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.school}}</td>
<td><button v-on:click="remove(index)">remove</button></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="name" v-model="user.name"/></td>
<td><input type="text" id="age"v-model="user.age"/></td>
<td><input type="text" id="school"v-model="user.school"/></td>
<td><button @click="insert">insert</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
user: {'name': '', 'age': '', 'school': ''},
users: [
{'name': '李磊', 'age': '25', 'school': '洛阳理工'},
{'name': '张成', 'age': '23', 'school': '桂林电子科技'},
{'name': '炼心', 'age': '22', 'school': '江西电子科技'}
]
}
},
methods: {
insert: function () {
this.users.push(this.user)
},
remove: function (index) {
this.users.splice(index, 1)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
tr,th{
text-align:center;
}
</style>
https://www.cnblogs.com/dreamsboy/p/6718218.html
问题18:iview table 中用根据不同状态改变颜色(用render)
问题19:
JS判断字符串变量是否含有某个字串的方法
var str ="abc";
if(str.indexOf("bc")>-1){
alert('str中包含bc字符串');
}
indexOf用法:
返回String对象内第一次出现子字符串的字符位置。
strObj.indexOf(subString[, startIndex])
参数
strObj
必选项。String对象或文字。
subString
必选项。要在String对象中查找的子字符串。
starIndex
可选项。该整数值指出在String对象内开始查找的索引。如果省略,则从字符串的开始处查找。
说明
indexOf 方法返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回-1。
如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。
从左向右执行查找。否则,该方法与 lastIndexOf 相同。
示例
下面的示例说明了 indexOf 方法的用法。
functionIndexDemo(str2){
var str1 ="ABABABAB"
var s = str1.indexOf(str2);
return(s);
}
对于JavaScript的indexOf忽略大小写
JavaScript中indexOf函数方法返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回-1。如果 startindex 是负数,则 startindex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。
indexOf函数是从左向右执行查找。否则,该方法与 lastIndexOf 相同。
下面的示例说明了indexOf函数方法的用法。
functionIndexDemo(str2){
varstr1 ="ABABABAB"
vars = str1.indexOf(str2);
return(s);
}
jquery方法一
var str ="abc";
if(str.indexOf("bc")!=-1){// !=-1含有 ==-1不含有
}
方法二
var str ="abc";
if(str.search("bc")!=-1){}
方法三
var str ="abc";
var reg =newRegExp("^.*bc.*$");
if(reg.test(str)){}
方法四
var str ="abc";
var reg =newRegExp("^.*bc.*$");
if(str.match(reg)){}
问题20,vue报如下警告:
重复命名路由:
检查一下是否有重复命名的,改下就不会报错了。
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140