我们做表格总有各种各样的判断,excel使用也是这样,我这边就讲讲我遇到的吧,没有遇到的请补充
一、根据某列的值,改变另列中按钮的样式或内容
组件:略!参考element表格table的格式
<!-- 表格 -->
<div style="height: 5rem;margin-top: 0.225rem;width: 95%;padding-left:.31rem;">
<!-- @row-click="tableRowClick" -->
<el-table :pages="pages1" :columns="columns1"
@primary-click="row => rowClick('primary', row)"
@success-click="row => rowClick('success', row)"
@danger-click="row => rowClick('danger', row)"
@selection-change="handleSelectionChange">
</el-table>
</div>
根据值某列的值去判断,如果该列的值==“未下发“,那么另一列显示就是下发,否则是显示更新下发
data() {
return {
pages1: {
pageNum: 1,
pageSize: 50,
pages: 1,
total: 5,
//表内容
values: [
// {policyname:"断网",policyid:"断网",policycode:"断网",note:"",groupname:"未分组",groupid:"-999",enabletime:"2020-12-04T16:50:52",createtime:"2020-10-01T20:54:14",}
],
},
}
}
//计算属性
computed:{
columns1() {//表头
return[
{ type: "selection", width: 40 },
{ type: "index", label: "序号", width: 50, sortable: true},
{ prop: "policyname", label: "策略名称", minWidth: 40, sortable: true },
{ prop: "groupname", label: "下发分组", minWidth: 60 },
{ prop: "policyid", label: "策略ID", minWidth: 40 },
{ prop: "policycode", label: "策略编码", minWidth: 70 },
{ prop: "createtime", label: "策略创建时间", minWidth: 80, sortable: true },
{ prop: "enabletime", label: "策略下发时间", minWidth: 80, sortable: true },
{ prop: "note", label: "策略描述", minWidth: 120},
{ type: "option", label: "操作按钮", width: 290,
options:[
{ type: "primary", title: "查看"},
{ type: "success", title: "编辑"},
{ type: "danger", title: "下发",show: function(row, column, $index) {
return row["enabletime"] === "未下发";
}
},
{ type: "danger", title: "更新下发", show: function(row, column, $index) {
return row["enabletime"] != "未下发";
}
}
]
}
]
},
},
//函数
methods:{
//表中按鈕點擊事件
rowClick(type,row){
console.log("row-click", type, event);
// alert("hellddddo "+ type + row.policyname);
if(type == "success"){
this.bn_lookandbianjin(row);
}else if(type == "danger"){
this.bn_celueGXxiafaa(row);
}else if(type == "primary"){//查看
this.bn_chakan(row);
}
},
bn_chakan(row){//查看按钮事件1
},
bn_lookandbianjin(row){//编辑按钮事件1
},
bn_celueGXxiafaa(row){//下发和更新下发按钮事件1
},
},
二、根据当前值,改变当前内容
还有一种是根据获得当前列的值,进行判断,然后让该列显示,0是普通员,1是管理员,2是操作员显示在该列。表格类似;
columns() {
return [
{ type: "selection", width: 60 },
{ type: "index", label: this.$t("common.index"), width: 50 },
{ prop: "UserAccount", label: this.$t("Account"), minWidth: 30 },
{ prop: "UserPassword", label: this.$t("Password"), minWidth:30 },
{ prop: "UserName", label: this.$t("Name"), minWidth: 40 },
{ prop: "UserType", label: this.$t("Type"), minWidth: 20 ,
formatter: function(row, column, cellValue, $index){
switch (cellValue) {
case 0:
return "操作员";
case 1:
return "管理员";
case 2:
return "超级管理员";
}
}
},
{ type: "option", label:this.$t("common.option"), width: 90,
options:[
{ type: "edit", title: this.$t("buttons.edit")},
]
}
]
},