Element Ui +Vue实现全选(求解决,快来)

最新推荐文章于 2023-04-07 14:09:39 发布

Sporg

最新推荐文章于 2023-04-07 14:09:39 发布

阅读量402

点赞数 2

文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/Sporg/article/details/121489076

版权

这篇博客介绍了在 Vue.js 应用中利用 Vuex 管理状态，实现表格的全选功能。通过监听 checkbox 的变化，更新数据列表中每个条目的选中状态，并提供了删除和编辑操作。示例代码展示了如何结合 el-table 组件进行交互，包括图片显示、价格计算和数量输入等。

摘要由CSDN通过智能技术生成

点击全选按钮后有输出结果识图无效果如何解决

第一次写博客不太会文笔也不好大佬们凑合着看吧小白胆怯

如果还缺什么东西可以评论到下方我会及时补充

我写代码时应用了vuex,不用也没关系实现大体功能即可json代码在下方

代码字段:

<template>
  <div>
    <el-button type="success" round size="mini" @click="$router.push('/goods')"
      >返回列表</el-button
    >
    <el-table
      show-summary
      :data="newArr"
      border
      style="width: 100%"
      sum-text="总价格"
    >
      <el-table-column>
        <template slot="header">
          <el-checkbox
            label="全选"
            v-model="checkall"
            @change="checkallfn(checkall)"
          ></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.done" @change="donefn(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="productName" label="name"> </el-table-column>
      <el-table-column label="image">
        <template slot-scope="scope">
          <img width="100%" :src="`/img/${scope.row.productImage}`" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="Price">
        <template slot-scope="scope">
          <span>￥{{ scope.row.salePrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Num" width="160">
        <template slot-scope="scope">
          <el-input-number
            v-model.number="scope.row.num"
            size="mini"
            @change="handleChange(scope.row)"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            round
            @click="delOne(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      checkall: false,
    };
  },
  computed: {
    ...mapState(["list", "newArr"]),
    checkall: {
      get() {
        if (this.newArr.length == 0) {
          return false;
        } else {
          return this.newArr.every((item) => {
            return item.done == true;
          });
        }
      },
      set(v) {
        console.log(v);
        this.newArr.forEach((item) => {
          item.done = v;
        });
      },
    },
  },
  methods: {
    ...mapMutations(["delOne", "handle", "doneFn"]),
    handleChange(obj) {
      this.handle(obj);
    },
    donefn(obj) {
      this.doneFn(obj);
    },
    checkallfn(doneall) {
      this.checkall = doneall;
      console.log(this.checkall);
    },
  },
};
</script>

<style></style>

json:

{
    "status": "0",
    "msg": "",
    "result": {
        "count": 8,
        "list": [
            {
                "id": "1",
                "productId": "201710007",
                "productName": "自拍杆",
                "salePrice": 39,
                "productImage": "zipai.jpg",
                "productUrl": ""
            },
            {
                "id": "2",
                "productId": "201710002",
                "productName": "智能插线板",
                "salePrice": 59,
                "productImage": "6.jpg",
                "productUrl": ""
            },
            {
                "id": "3",
                "productId": "201710004",
                "productName": "头戴式耳机-3",
                "salePrice": 80,
                "productImage": "2.jpg",
                "productUrl": ""
            },
            {
                "id": "4",
                "productId": "201710017",
                "productName": "小钢炮蓝牙音箱",
                "salePrice": 129,
                "productImage": "1.jpg",
                "productUrl": ""
            },
            {
                "id": "5",
                "productId": "201710018",
                "productName": "智能摄像机",
                "salePrice": 389,
                "productImage": "photo.jpg",
                "productUrl": ""
            },
            {
                "id": "6",
                "productId": "201710016",
                "productName": "Ear700",
                "salePrice": 700,
                "productImage": "16.jpg",
                "productUrl": ""
            },
            {
                "id": "7",
                "productId": "201710009",
                "productName": "IH 电饭煲",
                "salePrice": 999,
                "productImage": "9.jpg",
                "productUrl": ""
            },
            {
                "id": "8",
                "productId": "201710011",
                "productName": "Ear1000",
                "salePrice": 1000,
                "productImage": "11.jpg",
                "productUrl": ""
            }
        ]
    }
}