VUE表格根据某列数据进行动态变化，几种场景方法

我们做表格总有各种各样的判断，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")},
                    ]
                }
            ]
        },