element-ui表格

嵌套弹出框问题

1.点击表格中的按钮，弹出框不显示
2.如何同步弹出框和表格内容

解决

1. 表格内按钮 调用 handleEdit ( ) 方法

   <el-table-column
        label="操作">
      <template slot-scope="scope">
       <el-button type="text" size="small"  
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>

2. 弹出框 定义一个数据editFormVisible，它的作用是控制添加用户对话框的显示与隐藏

  editDialogVisible: false  //默认为隐藏

对于数据的修改填写，使用Element UI中的Form表单组件。 el-form为主体对象，el-form-item是表单的每一项。
在el-form中，ref是能够通过引用拿到表单的引用对象。model是绑定表单的数据项，rules是绑定表单的校验规则，label-width是每一项的宽度。
在el-form-item中，label是标签文本，prop是传入表单域的验证规则。
在el-input中，v-model是能够实现表单域的双向数据绑定。

    <el-dialog title="编辑" :visible.sync="editFormVisible":close-on-click-modal="false"
               class="edit-form">
    
        <el-form :model="editForm" label-width="80px" ref="editForm">
          <el-form-item label="工号" prop="work_id">
            <el-input v-model="editForm.work_id" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="name">
            <el-input v-model="editForm.realname" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份" prop="identity">
             <el-input v-model="editForm.identity" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建日期" prop="create_time">
             <el-input v-model="editForm.create_time" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="上一次登录时间" prop="last_login_time">
             <el-input v-model="editForm.last_login_time" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="handleCancel('editForm')">取消</el-button>
            <el-button type="primary" @click.native="handleUpdate('editForm')">更新</el-button>
           </div>
      </el-dialog>

script内

export default {
  methods: {
    handleCurrentChange:function () {
this.tableData.push({work_id:this.editForm.work_id,realname:this.editForm.realname,identity:this.editForm.identity,create_time:this.editForm.create_time,last_login_time:this.editForm.last_login_time});
    },
     //删除最后一行数据
    delRow(index, row){
      this.tableData.splice(this.tableData.indexOf(row),1);
    },
        //删除当前行数据
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
       // 编辑
    handleEdit: function (index, row) {
      this.editFormVisible = true;//dialog对话窗口打开
      this.editForm = Object.assign({}, row);//将数据传入dialog页面
      this.editForm.index=index;//传递当前index
    },
      //取消
    handleCancel(formName) {
      this.editFormVisible = false;
    },
     //更新
    handleUpdate(forName) {
      //dialog页面数据写入到tableData页面上
      //this.$set(tableName,talbeIndex,data)
      this.$set(this.tableData,this.editForm.index,{work_id:this.editForm.work_id,realname:this.editForm.realname,identity:this.editForm.identity,create_time:this.editForm.create_time,last_login_time:this.editForm.last_login_time});
      this.editFormVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
   },

  data() {
    return {
      editForm: {
        work_id: '',
        realname: '',
        identity:'',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        index:0
        },
        定义属性
        work_id:undefined,
        realname:undefined,
        identity:undefined,
        //默认dialog弹窗不打开（true打开，false为不打开）
        editFormVisible: false,
      tableData: [{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      },{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      },{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
      }]
    }
  }
}

运行

修改数据前

修改

修改后

动态按钮实现

按钮 用v-if/v-else指令实现按钮的显示与隐藏

<el-button size="mini" type="danger" v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用</el-button>
<el-button size="mini" type="primary" v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用</el-button>

在每一个data添加buttonVisible字段

{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      }

changeTable方法，点击按钮的时候更改buttonVisible的值

changeTable (buttonVisible, index) {
  this.tableData[index].buttonVisible = !buttonVisible
  }

给el-table添加row-style，并且将tableRowStyle方法传递给row-style

<el-table 
   :data="tableData"
   class="table"
   border 
   :row-style="tableRowStyle"
  >

运行
点击前：

点击后：