VUE（Element Plus）, 根据变量添加组件属性的问题
本帖最后由 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
Demo代码：
<!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 === value
}
}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html> 本帖最后由 森岛帆高 于 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> <!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 === value
}
}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
vue中的判断v-if和v-else可以满足你的需求，可以下来多研究研究 elonlo 发表于 2022-10-4 11:23
感谢。
这些条件渲染都会用，经验不足，不懂变通，谢谢指教。 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>
```
页:
[1]