Quasar 简单使用
错误提示
- 添加布局代码`
<div class="width-1of1 clearfix">
<div><label><span class="red">*span> 服务器IP：label>div>
<div><q-input v-model="rowItem.serviceIP" @blur="$v.rowItem.serviceIP.$touch"
@keyup.enter="save"
:error="$v.rowItem.serviceIP.$error" @input="selectByServiceIp" />
div>
<label class="text-red">{{serviceIP_label}}label>
div>- 属性声明
export default {
//判断字段是否为空，
validations: {
rowItem: {
//需要判断不能为空的属性
//服务器ip，判断是不是为空
serviceIP: {
required
},
clientName:{
required
},
password:{
required
},
account :{
required
}
}
}
}export default {
data() {
return {
serviceIP_label : "", // 服务器ip错误提示栏
account_label : "", // 账户错误提示栏
select: '1',
options_module: [{label: '资源',value: '1'},{label: '题库',value: '2'},{label: '用户',value: '3'}],
options_state: [{label: '开启',value: '1'},{label: '关闭',value: '0'}]
}
},- 方法
save() {
this.$v.rowItem.$touch()
if(this.$v.rowItem.$error) {
this.$q.notify({
message: '请检查必填字段是否已填写！',
timeout: 3000,
position: 'bottom'
})
return
}
let rowItem = this.rowItem;
this.$emit('saveForm', true, rowItem); //调用父窗口关闭弹出窗口并刷新列表方法
},//查询服务器ip是否已存在
selectByServiceIp() {
//服务器ip
let serviceIP = this.rowItem.serviceIP;
if(serviceIP != null && serviceIP != ""){
//根据服务器ip，查询用户信息
getUserDataByServiceIP(serviceIP).then((res) =>{
let code = res.code; //状态
let content = res.content; //内容
//判断客户名称是否存在
if(code == 0 && content != null){
this.serviceIP_label = "服务器IP已经存在，请重新填写";
// /this.showPrompt('失败', '服务器IP已经存在', false, function() {}, function() {});
//服务器ip存在
this.serviceIPExist = "1";
return;
}
else{
//服务器ip不存在
this.serviceIPExist = "0";
this.serviceIP_label = "";
}
});
}
},- 参考
- 展示
vuejs属性定义
export default {
//定义初始值
data() {
return {
//添加属性
}}，
//定义方法地方
methods :{}
//初始化页面地方
mounted(){}
//添加模块
components: {}
} table使用
1. 添加包
//
import QBtn from "../../../../src/components/btn/QBtn";- 代码布局
<q-table ref="server" :data="serverData" :columns="columns" :selection="selection" :selected.sync="selected" :loading="loading" row-key="id" color="secondary">
<q-td slot="body-cell-op" slot-scope="cell" style="width:200px;">
<div class="q-mb-xs">
<a href="javascript:void(0);" @click="updateForm(cell.row.id)">修改a>
<a href="javascript:void(0);" @click="interfaceConfigForm(cell.row.id)">接口配置a>
div>
q-td>
q-table>- 数据赋值
//定义初始值
data() {
return {
//列表字段
columns: [{
name: 'id',
label: 'ID',
align: 'center',
field: 'id'
},
{
name: 'clientName',
align: 'center',
label: '客户名称',
field: 'clientName'
},
{
name: 'contacts',
align: 'center',
label: '联系人',
field: 'contacts'
},
{
name: 'phone',
align: 'center',
label: '电话',
field: 'phone'
},
{
name: 'account',
align: 'center',
label: '账号',
field: 'account'
},
{
name: 'password',
align: 'center',
label: '密码',
field: 'password'
},
{
name: 'op',
align: 'center',
label: '操作'
}
],- 图片
