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

最新推荐文章于 2023-11-23 09:50:29 发布

养只月亮412

最新推荐文章于 2023-11-23 09:50:29 发布

阅读量491

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/TC0221/article/details/129986831

版权

在这里插入图片描述
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'
        }
      ],