vue+element中添加一列並點擊某一列修改當前列的內容

<div class="empower">
        <el-table
         :data="tableData"
          :cell-style="cellStyle"
          :header-cell-style="tableHeaderColor"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%"
          class="AuthTable"
          @cell-dblclick="tableDbEdit"
        >
          <el-table-column label="主動受權" style="width: 100%">
            <el-table-column
              v-for="items in GrantTabData"
              prop="items.dataItem"
              :key="items.index"
              :label="items.dataName"
            >
              <template slot-scope="scope">
                <i :class="[items.isActive==false?'el-icon-close':'el-icon-check']"></i>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="添加受權" :visible.sync="centerDialogVisible" width="30%" center>
  <el-form ref="form" label-width="100px" label-position="left">
    <el-form-item label="受權名稱">
      <el-input v-model="AuthName"></el-input>
    </el-form-item>
    <el-form-item label="是否開啓受權">
      <el-switch v-model="Authvalue" active-color="#4c84ff" inactive-color="#d8e0e5"></el-switch>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="Save">保存</el-button>
  </span>
</el-dialog>
      
  data() {
     return {
      centerDialogVisible: false,
         GrantTabData: [],
         tableData: [
            {
              id: 0,
              Strata: 0,
              DataCollection: 0,
              CI: 0,
              OEE: 0,
            }
          ]
     }
      
  }
   methods: {
   // 點擊添加受權
   AddAuthFun() {
  this.centerDialogVisible = true;
  this.Authvalue=false;
  this.AuthName='';
},
        // 點擊受權修改受權
tableDbEdit(row, column, cell, event) {
  if (event.toElement.className == "el-icon-check") {
    console.log("55555555");
    // this.tableData.Strata=1
    event.toElement.className = "el-icon-close";
  } else if (event.toElement.className == "el-icon-close") {
    console.log("8888888");
    event.toElement.className = "el-icon-check";
    // this.tableData.Strata=0
  }
},
GetTableFun(){
  this.GrantTabData=[
    {
      dataItem: "Strata",
      dataName: "Strata系統",
      isActive:false
    },
    {
      dataItem: "DataCollection",
      dataName: "數據收集",
      isActive:false
    },
    {
      dataItem: "CI",
      dataName: "CI經理",
      isActive:true
    },
    {
      dataItem: "OEE",
      dataName: "OEE",
      isActive:false
    }
  ]
  console.log(this.GrantTabData)
},
 Save() {
  console.log(this.Authvalue);
  console.log(this.AuthName);
  this.centerDialogVisible = false;
  this.GrantTabData.push(
    {
      dataItem: this.AuthName,
      dataName: this.AuthName,
      isActive:this.Authvalue
    },
  );
  console.log(this.GrantTabData)
},
   }複製代碼
相關文章
相關標籤/搜索