1 小控件类

拿id

        userId:this.$store.state.user.userInfo.userId,
        retailerId:this.$store.state.market.retailer.id,
        retailerCode:this.$store.state.market.retailer.code,
        outletId:this.$store.state.market.outlet.id,
        outletNo:this.$store.state.market.outlet.id.externalId

小按钮

<el-button type="danger" @click="submit_add('add_from')" >黑色按钮</el-button>
<el-button type="primary" @click="resetForm('add_from')">橙色按钮</el-button>
<el-button type="info" @click="resetCalendarBtn()" >灰色按钮</el-button>
<i class="hover_orange iconfont iconlajitong" :name="scope.row.id" @click="open_del(scope.row.id)" style="cursor: pointer;font-size: 20px;vertical-align: middle;">表格里面的小按钮，（文字去掉）</i>

复合型按钮

<div name="搜索组合按钮">
         <el-input class="combination" placeholder="请输入内容" id="search-text" prefix-icon="el-icon-search" v-    model.trim="keyword" style="width:250px"></el-input>
         <el-button type="danger" class="combination" @click="search_click()">搜索</el-button>
</div>
<div name="3组合按钮">
     <el-input prefix-icon="el-icon-search" placeholder="请输入内容" v-model="search_text" class="input-with-select" >
         <el-select v-model="search_type" slot="prepend" placeholder="请选择" style="width: 120px">
              <el-option label="条形码" value="2"></el-option>
              <el-option label="商品名称" value="1"></el-option>
              <el-option label="商品货号" value="3"></el-option>
          </el-select>
         <el-button slot="append" type="primary" id="searchBtn">搜索</el-button>
     </el-input>
</div>

按钮和表单禁用

<el-button v-if="editDisabled" :disabled="entityObj.status == 1||entityObj.hasCarouseltrue:false":title="entityObj.status == 1||entityObj.hasCarousel?'该广告已启用，不支持编辑':''" :class="entityObj.status == 1||entityObj.hasCarousel?'disableBtn':''" type="danger" @click="editBtn">禁用编辑按钮</el-button>
<el-input :class="process==1?'readonly_input':''" v-model="add_param.name" :readonly="process==1">输入框禁用</el-input>

表格和分页

html

<div>
    <div v-if="page_count!=0" class="table_content">
        <el-table :data="table_list" v-if="page_count!=0" class="table_nopadding" ref="multipleTable"  stripe :header-cell-style="{fontSize: '14px',color: '#777777',padding:'12px 0',fontWeight: 'normal'}" style="width: 100%;font-size: 14px;color: #333;height: 552px;border:1px solid #EBEEF5">
            <el-table-column header-align="left" align="left" prop="name" width="310" label="档期名称">
                <template slot-scope="scope">
                    <span class="orange_hover" style="cursor: pointer" @click="dmCalendarPage(scope.row.id)" :title="scope.row.name">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column header-align="left" align="left" prop="dmCount" label="快讯单张数" width="120"></el-table-column>
            <el-table-column header-align="left" align="left" width="200" label="起始时间">
                <template slot-scope="scope">
                    {{startTime[scope.$index]}}
                </template>
            </el-table-column>
            <el-table-column header-align="left" align="left" width="200" label="结束时间">
                <template slot-scope="scope">
                    {{endTime[scope.$index]}}
                </template>
            </el-table-column>
            <el-table-column header-align="left" align="left" label="状态">
                <template slot-scope="scope">
                    {{status[scope.$index]}}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="text-align: center;margin-top: 40px;"
            background
            @current-change="handleCurrent"
            :current-page.sync="c_page"
            layout="prev, pager, next, jumper"
            :page-count="page_count">
        </el-pagination>
    </div>
    <div v-else id="promptDiv" style="opacity: 0.4;">
        <div id="searchResult" style="display: block">
            <img src="@/assets/img/search_nothing.png" style="margin-bottom:20px;"/>
            <p>没有找到相关的档期，请检查搜索内容是否有误</p>
        </div>
    </div>
</div>

js

 data() {
        table_list:[],//表格数据
        page_count:0,//总页数
        c_page:1,//当前页面
        s_param:{//查询列表参数
                outletId:this.$store.state.market.outlet.id,
              calendarType:0,
              num: 0,
        },
 },
 watch:{
         //页数要减一
        c_page(new_val,old_val) {
              this.s_param.num = new_val-1
        }
 },
 methods:{
         //获取列表
         get_table_list(page) {
                let self = this
                let url = "/webApi/dm/calendar/list";
                let params = this.s_param;
                self.$api.post(this, url, params, data => {
                    self.page_count = data.pageCount;
                    self.table_list = data.results;
                })
            },
 
 }  
 

form校验规则

必填：{required: true, message: ‘必填’, trigger: ‘blur’ },
正整数：{type:’integer’,min: 0, max:999999999,message: ‘请填写正整数’,trigger: ‘blur’}
数组：{type:’array’,required: true, message: ‘必填’, trigger: ‘change’ },
手机：{pattern: /^((0d{2,3}-d{7,8})|(1[34578]d{9}))$/, message: ‘手机为:13,14,15,17,18号段’,trigger: ‘change’},