学习vue2+element UI中遇到的问题

Question

    <div class="layuimini-main">
        <el-form inline>
            <el-form-item label="姓名">
                <el-input v-model="vo.name"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="vo.phone"></el-input>
            </el-form-item>
            <el-form-item label="门店">
                <el-cascader ref="cas"
                             :options="shopcas"
                             v-model="selectedShop"
                             :props="{ checkStrictly: true }"
                             clearable></el-cascader>
            </el-form-item>

            <el-form-item>
                <el-button icon="el-icon-search" @click="find">搜索</el-button>
                <el-button icon="el-icon-search" @click="vo.phone=null;vo.name=null;find()">搜索全部</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<div class="layuimini-container" style="padding:0px 10px; margin-top:8px;">
    <el-table :data="i.records" stripe>
        <el-table-column type="selection" prop="id" :multiple="false"></el-table-column>
        <el-table-column prop="name" label="姓名" ></el-table-column>
        <el-table-column prop="sex" label="性别" >
            <template slot-scope="s">
                {{ s.row.sex == 1 ? '男' : '女' }}
            </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" ></el-table-column>
        <el-table-column prop="zdName" label="总店名称" ></el-table-column>
        <el-table-column prop="fdName" label="分店名称" ></el-table-column>
        <el-table-column prop="lastTime" label="最后一次检测时间" ></el-table-column>
        <el-table-column prop="phone" label="电话" ></el-table-column>
    </el-table>
    <el-pagination :current-page.sync="i.current"
                   :page-size.sync="i.size"
                   :total="i.total"
                   @current-change="find"
    />


</div>


<div class="layuimini-container" style="padding:0px 10px; margin-top:8px;">
    <div class="layuimini-main">
        <el-form inline>
            <el-form-item label="筛选周期">
                <el-select v-model="filterPeriod" placeholder="请选择">
                    <el-option label="近7天" value="7"></el-option>
                    <el-option label="近15天" value="15"></el-option>
                    <el-option label="近30天" value="30"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="find">查询</el-button>
                <el-button type="success" @click="exportData">导出Excel</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

如何完成筛选周期查询，通过复选框的id获取该条角色的信息，每次只能查询一个角色的信息 ，筛选周期与今天的时间想对比，近七天就是该角色最后一次检测时间是不是在今天的前7天内

Answer 1

引自免费微信小程序：皆我百晓生

你的问题似乎是关于Vue.js和Element UI的使用，特别是在表单和表格中的数据处理和交互。我会尝试帮助你解决一些可能遇到的问题。不过，我需要你更具体地描述你遇到的问题，例如是代码运行错误、数据绑定问题还是组件交互问题等等。下面是一些基础的解答：

1. 数据绑定问题：确保你的Vue实例中的数据属性（如vo.name，vo.phone等）已经在Vue实例的data函数中定义过。如果这些数据来自于异步请求，请确保在数据返回并更新前，页面不会进行渲染。
2. 表格渲染问题：如果表格数据显示不正确，请检查你的数据源（i.records）是否正确更新，并且确保你的表格列属性（如prop）与数据源中的字段名匹配。
3. 级联选择器问题：对于<el-cascader>组件，请确保你的:options属性传递的shopcas数据格式正确，并且符合Element UI的要求。另外，你需要处理选择变化时的事件，以便更新你的表单数据。
4. 按钮点击事件问题：对于搜索按钮和导出按钮的点击事件，确保你的方法（如find，exportData）在Vue实例的methods中已正确定义。另外，当点击“搜索全部”按钮时，你需要将电话号码和姓名重置为null并触发搜索事件。确保这个逻辑在你的find方法中已正确实现。
5. 筛选周期选择问题：对于<el-select>组件绑定的filterPeriod属性，你需要确保在你的Vue实例的data中定义了它，并在相关的处理方法（如find）中使用它来获取或更新筛选周期。

如果你能提供更具体的问题描述或错误信息，我将能够更精确地帮助你解决问题。如果需要绘制组件的结构图或者模拟数据交互的流程图，我也可以尽力帮助你画出这些图。