elementUI el-table组件,数据筛选,数据回显,单选,多选
2023-12-13 06:02:16
多选
:filtered-value="filteredValue" 回显数据方法
//tableData 后台返回数据进行渲染
<el-table ref="filterTable" :data="tableData">
<el-table-column prop="now_status" label="状态"
:filter-method="filterTag1" :filters="filtersZT" :filtered-value="filteredValue">
<template slot-scope="scope">
<span >{{ status[scope.row.RunStatus] }}</span>
</template>
</el-table-column>
</el-table>
:filters="filtersZT"
定义数据中显示的内容
<script>
export default {
data() {
return {
tableData:[
{
id:1,
'RunStatus':1,
'name':'名称1'
},
{
id:2,
'RunStatus':2,
'name':'名称2'
},
{
id:3,
'RunStatus':99,
'name':'名称3'
}
],
filtersZT:[
{ text: '名字动99', value: 99 },
{ text: '名字动-1', value: -1 },
{ text: '名字动0', value: 0 },
{ text: '名字动1', value: 1 },
{ text: '名字动2', value: 2 },
{ text: '名字动3', value: 3 },
{ text: '名字动4', value: 4 },
{ text: '名字动5', value: 5 },
{ text: '名字动6', value: 6 },
{ text: '名字动6', value: 7 },
{ text: '名字动8', value: 8 },
{ text: '名字动9', value: 9 },
{ text: '名字动10', value: 10 },
{ text: '名字动11', value: 11 }
],
// 根据状态 自定义名称
status : {
'-1':'名字动-1',
0: '名字动0',
1: '名字动1',
2: '名字动2',
3: '名字动3',
99: '名字动99',
4: '名字动4',
5: '名字动5',
6: '名字动6',
7: '名字动7',
8:'名字动8',
9: '名字动9',
10: '名字动10',
11: '名字动11',
},
filteredValue:[]
}
}
}
// RunStatus是后台返回的数据tableData中的属性
filterTag1(value, row) {
return row['RunStatus'] == value;
},
//回显数据方法 写在需要回显的地方调用,只需赋值filtersZT中的value
info(){
this.filteredValue = [4, 5, 6, 7, 8, 9, 10, 11, 99]
//如果不显示 强制更新页面
this.$forceUpdate();
}
单选
文章来源:https://blog.csdn.net/sumimg/article/details/134947322
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!