element多选表格 在弹窗中选择 渲染到页面中:

多选表格去掉全选显示序号(样式):

.tableCss {
  .el-table-column--selection.is-leaf .el-checkbox {
    display: none;
  }
  .el-table-column--selection.is-leaf ::before {
    content: '选择';
  }
}

需求:

外层表格数据 可以改动,内层不变,但是做删除时需要联动:

tableData1:弹窗中多选表格的数据

tableData:页面中表格的数据

我的处理逻辑是,深拷贝多选表格的数据,渲染到页面中,将index绑进数据中,做标识,这样,外层数据在删除时,就可以确定到弹窗表格取消选中的是哪一组数据了:

我是动态获取的表格数据,此处有坑:打开弹窗时需要请求数据,但是如果已经勾选,第二次打开弹窗,再次请求,返回数据就会覆盖原本数据,选中状态就会被全部取消掉,这样就违背了联动的初衷,所以此处需要判断:

addNew() {
      if (this.page != this.current) {  // 判断当前页码和上次返回页码是否一致 一致的话,就不再请求
        this.$api.order.packageSelectList(this.page).then(res => {
          let list = res.records
          // 翻页处理
          if (this.page == 1) {
            this.tableData1 = list
          } else {
            this.tableData1.push(...list)
          }
          this.tableData1.forEach((item, indexs) => {
            item.indexs = indexs  // 将索引绑在元素上,方便后续做联动
          })
          this.listTotal = res.total
          this.current = res.current
        })
      }
      this.dialogVisible2 = true
    },

选中数据事件:

// 选择时深拷贝数据
 // 在data中定义数组dataList
    handleSelectionChange(val) {
      this.dataList=val   // 这里可以深拷贝,也可以浅拷贝,在弹窗确认时,深拷贝和在这里深拷贝二选一
    },

弹窗点击确认:

   sureProduct() {
      let arr = JSON.parse(JSON.stringify(this.dataList)) // 深拷贝数据,这样修改的时候就不会改到原本表格的数据了
      let list = this.getList(arr, true) // 处理数据格式
      let list1 = this.editData(list) // 处理数据格式  这里是外层表格显示数据与内层不一样,所以进行处理
      this.tableData = list1
      this.dialogVisible2 = false  // 关闭弹窗
    },

删除外层表格数据,内层表格对应数据取消选中:

apply(id, index, type, indexs) {
// 取消表格中对应数据的选中
		this.$refs.multipleTable.toggleRowSelection(this.tableData1[this.indexs]); 

        this.tableData.splice(this.index, 1)  // 删除外层表格中对应数据
 }

这样就做好了,删除的联动,外层数据的修改,也不会改到多选表格的数据。但是这样有一个bug:

重新选择数据后,新数据会覆盖原本被改动了的数据

所以弹窗确认时不能直接覆盖:

 sureProduct() {
      // let arr = JSON.parse(JSON.stringify(this.dataList))
      let arr1 = JSON.parse(JSON.stringify(this.dataList)),
        arr2 = JSON.parse(JSON.stringify(this.tableData)),
        Alength = this.tableData.length;
      if (Alength > 0) {
        this.tableData.forEach(val => {
          arr1 = arr1.filter(ele => ele.indexs != val.indexs)  // 增加的数据
        })
        this.dataList.forEach(val => {
          arr2 = arr2.filter(ele => ele.indexs != val.indexs) // 改变和减少的数据
        })
      } else {
        arr1 = JSON.parse(JSON.stringify(this.dataList))
      }

      if (arr1.length > 0) {
        let list = this.getList(arr1, true)
        let list1 = this.editData(list)
        this.tableData.push(...list1)
      }
      if (arr2.length > 0) {
        arr2.forEach(element => {
          this.tableData = this.tableData.filter(ele => ele.indexs != element.indexs) // 筛选掉减少的数据
        });
      }
      this.dialogVisible2 = false
    },

### 回答1: 好的,我可以帮您用 Element UI Plus 写一个格式的页面。 首先,您需要确保您的项目中已经安装了 Element UI Plus。然后,您可以在 Vue 组件中使用 Element UI Plus 的组件来构建您的格式页面。 下面是一个示例组件,它包含三个不同的表格,每个表格都具有不同的列和数据: ``` <template> <div> <!-- 表格1 --> <el-table :data="table1Data"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> <!-- 表格2 --> <el-table :data="table2Data"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="title" label="标题"></el-table-column> <el-table-column prop="author" label="作者"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> </el-table> <!-- 表格3 --> <el-table :data="table3Data"> <el-table-column prop="country" label="国家"></el-table-column> <el-table-column prop="city" label="城市"></el-table-column> <el-table-column prop="population" label="人口"></el-table-column> <el-table-column prop="density" label="密度"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { table1Data: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 30, gender: '男' }, ], table2Data: [ { id: 1, title: '文章1', author: '张三', date: '2022-01-01' }, { id: 2, title: '文章2', author: '李四', date: '2022-02-01' }, { id: 3, title: '文章3', author: '王五', date: '2022-03-01' }, ], table3Data: [ { country: '中国', city: '北京', population: 2171, density: 1319 }, { country: '美国', city: '纽约', population: 8623, density: 10969 }, { country: '日本', city: '东京', population: 13927, density: 6246 }, ], }; }, }; </script> ``` 在这个示例组件中,我们使用了 Element UI Plus 的 el-table 和 el-table-column 组件来创建三个不同的表格。每个表格都具有不同的列和数据。 您可以根据您的需求修改这个示例组件,并添加更表格、图表或其他 Element UI Plus 的组件来构建您的格式页面。 ### 回答2: Element UI Plus 是一个基于 element-ui 进行拓展的开源前端组件库,可以用于构建规格的页面。下面是一个使用 Element UI Plus 构建规格页面的示例: 1. 首先,我们可以使用 Element UI Plus 提供的 Table 组件来展示个规格的商品信息。通过配置 Table 的 columns 属性,可以定义每个规格对应的列及其特征。 2. 接着,我们可以使用 Element UI Plus 提供的 Form 组件来收集用户输入的规格信息。可以根据商品所拥有的规格数量动态生成对应数量的表单项,每个表单项对应一个规格的属性。 3. 使用 Element UI Plus 提供的 Dialog 组件,可以在用户点击某个商品时,打开弹窗显示该商品的具体规格信息。在弹窗中,可以通过 Table 和 Form 组件展示规格信息,并提供编辑和保存功能。 4. Element UI Plus 还提供了丰富的其他组件,如 Select、Switch、Radio 等,可以用于更方便地实现、单等规格选择功能。 总结起来,使用 Element UI Plus,我们可以通过 Table、Form、Dialog 等组件,快速构建一个规格的页面。通过配置组件的各项属性,可以灵活地展示、编辑和保存个规格的商品信息。这样用户可以方便地查看和选择不同规格的商品,并进行相应的操作。 ### 回答3: 使用Element UI Plus编写一个规格的页面可以通过以下步骤进行: 1. 首先,在页面中引入Element UI Plus的库文件或CDN链接。 ```html <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus/lib/index.full.js"></script> ``` 2. 创建一个Vue实例,并在实例中注册Element UI Plus的组件。 ```html <div id="app"> <el-tabs v-model="activeTab"> <el-tab-pane label="规格1"> <!-- 根据规格1的属性渲染页面内容 --> <el-input v-model="spec1" placeholder="请输入规格1的值"></el-input> </el-tab-pane> <el-tab-pane label="规格2"> <!-- 根据规格2的属性渲染页面内容 --> <el-input v-model="spec2" placeholder="请输入规格2的值"></el-input> </el-tab-pane> </el-tabs> </div> <script> const app = Vue.createApp({ data() { return { activeTab: '规格1', spec1: '', spec2: '' } } }).mount('#app') </script> ``` 3.Vue实例的data对象中定义相关变量,用于存储规格的值。 4. 使用适当的Element UI Plus组件(如el-input)渲染规格的值输入框,通过v-model绑定规格的值到data对象中。 5. 使用el-tabs组件设置规格切换的标签页,通过v-model绑定当前中的规格,并在规格切换时显示相应的页面内容。 以上就是使用Element UI Plus编写一个规格的页面的基本步骤。你可以根据实际情况自定义规格的属性和相应的页面内容,来满足你的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值