Element el-switch 循环数据使用方法

最新推荐文章于 2024-08-02 13:33:47 发布

_大龄码农

最新推荐文章于 2024-08-02 13:33:47 发布

阅读量1.8k

点赞数 1

分类专栏：前端 element

本文链接：https://blog.youkuaiyun.com/qq_36229552/article/details/117732799

版权

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

element

10 篇文章

订阅专栏

本文介绍了一种使用Vue实现的表格组件案例，该组件通过循环渲染数据列表，并为每条记录配备一个开关按钮。当开关状态改变时，会触发相应事件进行数据过滤与更新，并最终形成用于提交的数据格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结构层：

<div v-for="(item, index) in dataList" :key="index">
          <el-row :gutter="20">
            <el-col class="col-text" :span="14">
              {{ item.text }}
            </el-col>
            <el-col :span="6">
              <el-switch
                v-model="item.switchValue"
                active-color="#45cdff"
                inactive-color="#d6d6d6"
                @change="switchChange"
              >
              </el-switch>
            </el-col>
          </el-row>
</div>

dataList数据格式：

dataList: [
        {
          text: 'xx工程师是否按约定时间上门',
          switchValue: true,
          type: '1001'
        },
        { text: '是否主动出示上岗工作牌', switchValue: true, type: '1002' },
        { text: 'xx完毕后是否逐项检查正常', switchValue: true, type: '1003' },
        {
          text: 'xx完毕后是否清洁设备和现场',
          switchValue: true,
          type: '1004'
        }
],

逻辑层：

//  评论switch
    switchChange(val) {
      let arr = JSON.parse(JSON.stringify(this.dataList))
      console.log(arr, 'dataList')
      arr.filter((obj) => obj.switchValue !== val)
      let newArray = arr.filter((item) => {
        return item.switchValue
      })
      console.log(newArray, '过滤后数据')
      let array = []
      newArray.forEach((item) => {
        array.push(item.type + '#' + item.text + '#1')
        this.appraiseForm.aoIdDesResult = array.toString()
      })
      console.log(array, '拼接数据')
    },

打印数据：
在这里插入图片描述
效果如下：