问题①. 坐标系 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. 禁用关闭 #

可以禁用关闭和遮罩层关闭。

只需要做如下操作：

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)){}

vue后台管理系统（个人笔记-总结）每日实时更新

JS判断字符串变量是否含有某个字串的方法

猜你喜欢

vue后台管理系统 （个人笔记-总结）每日实时更新

JS判断字符串变量是否含有某个字串的方法

猜你喜欢

vue后台管理系统（个人笔记-总结）每日实时更新