vue 编写产品筛选功能
根据行业筛选一级,(国家,价格,发布时间)列表带分页,按时间或者价格排序,以及分页设置10条/页码,20条/页码,50条/页码
以下代码
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
<div class="industries_cont clearfix">
<div class="indus_left">
<el-card class="box-card">
<div slot="header" class="clearfix">
<img src="../../assets/images/TopIndustriesicon.png" alt />
<span>Top Industries</span>
</div>
<div
@click="updateRightList(item.id,item.link,item.title)"
v-for="(item,index) in indiustries_list"
:key="index"
:class="['indus_title',{'color_main':item.id == id || item.title == namePath}]"
:style="{'display':item.count == 0 ? 'none':'block'}"
>
<span class="name">{
{
item.title }}</span>
<span class="num">({
{
item.count}})</span>
</div>
</el-card>
</div>
<div class="indus_right">
<div class="filter_lr clearfix">
<div class="filter_l">
<ul>
<li>region</li>
<li>Price</li>
<li>Dates</li>
</ul>
</div>
<div class="filter_r">
<div class="filter_list">
<ul class="country clearfix">
<li
:class="item.id==cur?'active':''"
@click="filterCountry(item.id,index)"
v-for="(item,index) in filter.country"
:key="index"
>
<span>{
{
item.name}}</span>
</li>
</ul>
<ul class="price clearfix">
<li
:class="item.price_id==cur1?'active':''"
@click="filterPrice(item.price_id,index)"
v-for="(item,index) in filter.price"
:key="index"
>
<span>{
{
item.price}}</span>
</li>
</ul>
<ul class="dates clearfix">
<li
:class="item.date_id==cur2?'active':''"
@click="filterDates(item.date_id,index)"
v-for="(item,index) in filter.dates"
:key="index"
>
<span>{
{
item.date}}</span>
</li>
</ul>
</div>
</div>
</div>
<div class="filter_box" v-if="this.error_code !== 60001">
<div class="page_query">
<p class="pl">
Total :
<span>{
{
records.count}}</span>records,
<span>{
{
records.pageCount}}</span> pages
</p>
<p class="pr">
Page Size:
<select
value="10"
class="ps_sel"
@change="getSize($event)"
v-model="params.pageSize"
>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
Sort By:
<select
value="time"
class="sort_sel"
@change="getOrderby($event)"
>
<option value="time">time</option>
<option value="price">price</option>
</select>
</p>
</div>
<div class="record_list">
<b-row v-for