el-table与el-cascader 实现数据联动

<el-table :data="tableData" style="width: 850px">
	<el-table-column type="index" label="序列" align="center">
	 </el-table-column>
	 <el-table-column type="name" label="名称" width="260">
	   <template slot-scope="scope">
	     <div class="rowBox">
	       <el-cascader :ref="'categoryName' + scope.$index" v-model="tableData[scope.$index]['categoryName']"
	       :options="options" placeholder="选择医院" @change="handleChange($event, scope.$index)"></el-cascader>
	       <span v-if="scope.$index == 0"></span>
	     </div>
	   </template>
	 </el-table-column>
</el-table>

tableData: [
        {
          name: '',
          team: '医学',
          address: '北京',
          contacts: 'zxx',
          phone: '111111111',
          categoryName:['人民医院', '医学', 'zxx']

        }
      ],
      options: [{
        value: '人民医院',
        label: '人民医院',
        children: [{
          value: '医学',
          label: '医学',
          children: [{
            value: 'zx',
            label: 'zx'
          }]
        }]
      }],
      phoneData: [
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },
        { tel: '111111111111' },

      ]
   handleChange(value, event) {
   // value 选择的值
   // event 当前选择的下标
      this.tableData[event].name = value[0]
      this.tableData[event].team = value[1]
      this.tableData[event].contacts = value[2]
      this.tableData[event].address = '北京'
      this.tableData[event].phone = this.phoneData[event].tel
    }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-dialog和el-table数据联动可以通过以下几个步骤实现: 1. 在el-dialog中定义需要编辑的表单字段,绑定表单数据对象。 ```html <el-dialog v-model="dialogVisible" title="编辑数据"> <el-form :model="formData" ref="form"> <!-- 表单字段 --> <el-form-item label="名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="formData.age"></el-input> </el-form-item> <!-- 其他表单字段 --> </el-form> </el-dialog> ``` 2. 在el-table中定义展示数据的列,并绑定数据列表。 ```html <el-table :data="tableData"> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <!-- 其他列 --> </el-table> ``` 3. 在页面中使用Vue的双向数据绑定,将el-dialog中的表单数据el-table中的数据列表进行联动。 ```javascript export default { data() { return { dialogVisible: false, // 控制对话框显示隐藏 formData: {}, // 表单数据对象 tableData: [], // 数据列表 }; }, methods: { editData(row) { this.formData = { ...row }; // 将选中行的数据赋值给表单对象 this.dialogVisible = true; // 打开对话框 }, saveData() { // 保存数据逻辑 // 更新tableData中对应的数据 // 关闭对话框 }, }, }; ``` 在el-dialog中的编辑按钮绑定`editData`方法,当点击编辑按钮时,会将选中行的数据赋值给表单对象,并打开el-dialog对话框。 在el-dialog中的保存按钮绑定`saveData`方法,当点击保存按钮时,执行保存数据的逻辑,更新tableData中对应的数据,并关闭el-dialog对话框。 这样就实现了el-dialog和el-table数据联动
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值