前端 - element ui 3 表格筛选问题?

 

问题描述:

图片.png
这个是element ui vue3的表格筛选,我想做的事如果我单选他返回true,这样没问题,
但是如果我多选,我想多选的每个都符合才返回true,这个应该怎么写啊?

    <el-table ref="tableRef" :data="tableData">
        <el-table-column type="index" />
        <el-table-column prop="name" label="名字" width="180" />
        <el-table-column
            prop="tag"
            label="Tag"
            :filters="[
                { text: '国外', value: 'abroad1' },
                { text: '国内', value: 'abroad0' },
                { text: '电影', value: 'category0' },
                { text: '电视剧', value: 'category1' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
        >
            <template #default="scope">
                <el-tag
                    effect="dark"
                    type="success"
                    v-if="scope.row.tag.category == 1"
                >
                    电视剧
                </el-tag>
                <el-tag effect="dark" type="success" v-else>电影</el-tag>
                <el-tag
                    effect="dark"
                    type="success"
                    v-if="scope.row.tag.abroad == 1"
                >
                    国外
                </el-tag>
                <el-tag effect="dark" type="success" v-else>国内</el-tag>
            </template>
        </el-table-column>
    </el-table>
const filterTag = (value: any, row: any, column: any) => {
    console.log("value:", value);
    console.log("row:", row);
    console.log("column:", column);
    if (value == "abroad1") return row.tag.abroad == 1;
    if (value == "abroad0") return row.tag.abroad == 0;
    if (value == "category0") return row.tag.category == 0;
    if (value == "category1") return row.tag.category == 1;
};

const tableData = [
    {
        name: "Tom",

        tag: {
            category: 1,
            abroad: 1,
        },
    },
    {
        name: "Tom",

        tag: {
            category: 1,
            abroad: 0,
        },
    },
    {
        name: "Tom",

        tag: {
            category: 0,
            abroad: 1,
        },
    },
    {
        name: "Tom",

        tag: {
            category: 0,
            abroad: 0,
        },
    },
];

 

第 1 个答案:

column.filteredValue中可以找到所选过滤项,然后遍历判断下就行,比如下面这样(里面逻辑直接用的你的代码,没有改)

const filterTag = (value, row, column) => {
    console.log("value:", value);
    console.log("row:", row);
    console.log("column:", column);
    
  return column.filteredValue.every(value => {
    if (value == "abroad1") return row.tag.abroad == 1;
    if (value == "abroad0") return row.tag.abroad == 0;
    if (value == "category0") return row.tag.category == 0;
    if (value == "category1") return row.tag.category == 1;
  })
};

 

第 2 个答案:

https://www.jianshu.com/p/ad3958b7cf64

image.png


 

第 3 个答案:

 filterTag(value, row) {
      for (const filterValue of this.filterValues.value) {
        if (filterValue == "abroad1" && row.tag.abroad != 1) return false;
        if (filterValue == "abroad0" && row.tag.abroad != 0) return false;
        if (filterValue == "category0" && row.tag.category != 0) return false;
        if (filterValue == "category1" && row.tag.category != 1) return false;
      }
      return true;
    },

打算购买人脸识别相关的SDK,看来下百度、虹软。大佬还有什么推荐的吗,性能更高,识别更准确的