vue实现年的所有周当按钮上下移动

VIP文章新老农

已于 2023-06-14 10:34:32 修改

阅读量97

点赞数

分类专栏： JS PHP Storm ajax 文章标签： php 开发语言

于 2022-07-15 16:42:37 首次发布

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/125807435

版权

按钮默认第一个（蓝色），点 上一周 往前一周，点 下一周 往后一周。点中间的周时，蓝色消除(图三)。

在这里插入图片描述

页面代码：

<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('vue/index.css') }}">
<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('vue/vue.css') }}">
<link rel="stylesheet" href="{
   { \Illuminate\Support\Facades\URL::asset('common/common.css') }}">

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{
   {
    $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<!-- 阻止右键事件 -->
<div id="app" v-loading="loading">
    <template>
        <el-form ref="form" :model="form" :inline = "true" class="demo-form-inline">
            <div class="box box-info" style="border-top-color:white;padding: 1rem;">
                <!-- 搜索 -->
                <el-row>
                    <el-form-item label="合同公司">
                        <el-select v-model="companyValue"  filterable multiple style="width:17rem;" placeholder="请选择合同公司">
                            <el-option
                                v-for="item in companyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="出货工厂">
                        <el-select v-model="factoryValue" filterable multiple style="width:18rem;" placeholder="请选择出货工厂">
                            <el-option
                                v-for="item in factoryList"
                                :key="item.id"
                                :label="item.abbr"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input v-model="search_word" style="width:17rem;" placeholder="输入订单号、款号、色号查询" title="输入订单号、款号、色号查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" class="search" @click="search()">查询</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="exportPdf">导出</el-button>

                        <el-button type="warning" round @click="cutting_push()">推送</el-button>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-d-arrow-left" class="btn last_week" @click="goWeek(1)">上一周</el-button>

                        <el-button
                            :type ="buttonType(index)"
                            plain
                            v-for="(item, index) in btnsArr"
                            :key="index"
                            @click="runBtnEvent(item,index)"
                        >${
    item.label }
                        </el-button>

                        <el-button type="primary" class="btn next_week" @click="goWeek(2)">下一周 &nbsp;<i class="el-icon-d-arrow-right"></i></el-button>
                    </el-form-item>

                </el-row>
                <!-- 表格 -->
                <el-row>
                    <el-table
                        :data="datas"
                        stripe
                        style="width: 100%;"
                        {
   {
   --              slot="reference"--}}
                    >
                        <el-table-column fixed type="index" label="序号" width="50" style="text-align: center"> </el-table-column>
                        <el-table-column
                            prop="client_name"
                            label="客户"
                            fixed
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="style_no"
                            label="款号-订单号-部门号" width="150">
                        </el-table-column>
{
   {
   --                        <el-table-column--}}
{
   {
   --                            prop="color_name"--}}
{
   {
   --                            label="色组" width="160">--}}
{
   {
   --                        </el-table-column>--}}
                         <el-table-column label="订单性质" width="80">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.order_type == 0" type="info">${
    scope.row.ordertype }</el-tag>
                                <el-tag v-else-