Quasar 简单使用

错误提示

1. 添加布局代码`

    <!-- 服务器IP -->
                        <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>

1. 属性声明

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'}]
            }
        },

1. 方法

    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 = "";
                        }
                    });
                }
            },

1. 参考
   
2. 展示
   

---

vuejs属性定义

export default {
        //定义初始值
        data() {
        return {
            //添加属性
        }}，
        //定义方法地方
        methods :{}
        //初始化页面地方
        mounted(){}
        //添加模块
        components: {}  
}       

---

table使用
1. 添加包

    //<button>配置
    import QBtn from "../../../../src/components/btn/QBtn";

1. 代码布局

<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>

1. 数据赋值

//定义初始值
        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: '操作'
                    }

                ],

1. 图片