Vue 前端页面筛选数据：日期排序

最新推荐文章于 2024-11-30 19:52:28 发布

原创最新推荐文章于 2024-11-30 19:52:28 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

该文章展示了如何在Vue前端页面中使用el-table-column组件进行数据筛选，特别是基于日期的排序。filter-method和filtered-value属性被用来定义过滤方法和设置过滤值，同时提供了rateOptions数据来供用户选择更新频率（日、周、月）。

在这里插入图片描述
Vue 前端页面筛选数据：日期排序

在这里插入图片描述
筛选：

  <el-table-column
            prop="updateRate"
            label="updateRate"
            width="100"
            :filter-method="filterTag"
            :filtered-value="['day','week']"
            :filters="rateOptions"
            filter-placement="bottom-end"
            >
            <template slot-scope="scope">
              <span v-if="scope.row.updateRate == 'day'"
                               style="color: #F56C6C">
                              {{scope.row.updateRate}}</span>
                <span
                  v-else-if="scope.row.updateRate == 'week'"
                  style="color: #2d8cf0"
                >{{scope.row.updateRate}}</span>
                <span
                  v-else-if="scope.row.updateRate == 'month'"
                  style="color: #42b983"
                >{{scope.row.updateRate}}</span>
            </template>
          </el-table-column>

methods方法：

    filterTag(value, row) {
      return row.updateRate === value;
    },

data里的return：

         //更新频率
         rateOptions: [
        {
          text: 'day',
          value: 'day'
        },
        {
          text: 'week',
          value: 'week'
        },
        {
          text: 'month',
          value: 'month'
        }
      ],