VUE（Element Plus）, 根据变量添加组件属性的问题

cqwcns · 发表于 2022-10-4 10:35

本帖最后由 cqwcns 于 2022-10-4 10:36 编辑

以下Demo，我通过Element Plus创建了一个table，字段名循环自数组tableHeader（实际应用时列会更多，且不确定，所以动态循环数组）。
我现在的需求是开启第一列（date）的筛选功能，根据官方文档，主要是添加filters、filter-method。

我以下的方法是判断如果index为0（即第一列），就为filters、filter-method赋值，否则为false。
这种写法，实际上每列都有了这两个属性，只是属性的值不同。

问题来了，后面的列filter-method无论是赋值false或''（空），控制台均会报错。

所以，有没有办法实现如果index为0，就添加filters、filter-method属性并赋值。如果index不为0，根本就不添加filters、filter-method属性。
不知道可以这么写？请各位大佬指教，感谢。

附官方文档地址：https://element-plus.gitee.io/zh-CN/component/table.html

无标题.png

Demo代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <head>
        <!-- style -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
        <!-- Vue 3 -->
        <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
        <!-- component library -->
        <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
    </head>
</head>

<body>
    <div id="app" style="width: 600px;">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(title,index) in tableHeader" :prop="title" :label="title"
                :filters="index==0?tableFilters:false" :filter-method="index==0?filterHandler:false" />
            </el-table-column>
        </el-table>
    </div>
    <script>

        let that = null,
            App = {
                data() {
                    return {
                        tableHeader: ['date', 'name', 'address', 'tag'],
                        tableData: [
                            {
                                date: '2016-05-03',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Home',
                            }, {
                                date: '2016-05-02',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Office',
                            }, {
                                date: '2016-05-04',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Home',
                            }, {
                                date: '2016-05-01',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Office',
                            }
                        ],
                        tableFilters: [
                            { text: '2016-05-01', value: '2016-05-01' },
                            { text: '2016-05-02', value: '2016-05-02' },
                            { text: '2016-05-03', value: '2016-05-03' },
                            { text: '2016-05-04', value: '2016-05-04' }
                        ]
                    }
                },
                methods: {
                    filterHandler(value, row, column) {
                        const property = column['property']
                        return row[property] === value
                    }
                }
            }
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>

森岛帆高 · 发表于 2022-10-4 11:21

本帖最后由森岛帆高于 2022-10-4 11:23 编辑

这个不是报错是警告。

期望是方法，你用了布尔值就有警告

<el-table-column v-for="(title,index) in tableHeader" :prop="title" :label="title"
:filters="index==0?tableFilters:undefined" :filter-method="index==0?filterHandler:undefined" />
</el-table-column>

elonlo · 发表于 2022-10-4 11:23

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <head>
        <!-- style -->
        <link rel="stylesheet"  />
        <!-- Vue 3 -->
        <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
        <!-- component library -->
        <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
    </head>
</head>
 
<body>
    <div id="app" style="width: 600px;">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(title,index) in tableHeader" v-if="index=0" :prop="title" :label="title" :filters="tableFilters" :filter-method="filterHandler" />
            </el-table-column>
		<el-table-column v-for="(title,index) in tableHeader" v-else :prop="title" :label="title"/>
            </el-table-column>
        </el-table>
    </div>
    <script>
 
        let that = null,
            App = {
                data() {
                    return {
                        tableHeader: ['date', 'name', 'address', 'tag'],
                        tableData: [
                            {
                                date: '2016-05-03',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Home',
                            }, {
                                date: '2016-05-02',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Office',
                            }, {
                                date: '2016-05-04',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Home',
                            }, {
                                date: '2016-05-01',
                                name: 'Tom',
                                address: 'No. 189, Grove St, Los Angeles',
                                tag: 'Office',
                            }
                        ],
                        tableFilters: [
                            { text: '2016-05-01', value: '2016-05-01' },
                            { text: '2016-05-02', value: '2016-05-02' },
                            { text: '2016-05-03', value: '2016-05-03' },
                            { text: '2016-05-04', value: '2016-05-04' }
                        ]
                    }
                },
                methods: {
                    filterHandler(value, row, column) {
                        const property = column['property']
                        return row[property] === value
                    }
                }
            }
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
 
</html>

vue中的判断v-if和v-else可以满足你的需求，可以下来多研究研究

cqwcns · 发表于 2022-10-4 11:31

elonlo 发表于 2022-10-4 11:23
[mw_shl_code=javascript,true]

感谢。

这些条件渲染都会用，经验不足，不懂变通，谢谢指教。

Takitooru · 发表于 2022-10-4 11:47

filters以及filter-method是数组类型，false改成null即可。
也是一句代码可以优化的。
代码如下

<el-table-column v-for="(title,index) in tableHeader" :prop="title" :label="title"
                :filters="index===0?tableFilters:null" :filter-method="index===0?filterHandler:null" />
            </el-table-column>

帐号		自动登录	找回密码
密码			注册[Register]

[求助] VUE（Element Plus）, 根据变量添加组件属性的问题

免费评分

免费评分

免费评分

个人中心