element-ui table 默认勾选 、编辑自动勾选

最新推荐文章于 2024-04-13 08:00:00 发布
最新推荐文章于 2024-04-13 08:00:00 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： Vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fellasleep/article/details/125613892
版权

在这里插入图片描述

多选框全部禁用
多选框使用selectable决定这一行是否可以勾选
注意：不显示多选框的行也要禁用，这样在使用toggleAllSelection()不会选中这些行

this.$refs.editList.toggleRowSelection(row, true/false) //当前行勾选切换

this.$refs.editList.toggleAllSelection() //默认勾选

<template>
  <div>
    <el-dialog
      title="编辑折扣模板"
      top="6vh"
      :visible="editTemplateShow"
      width="80%"
      :before-close="beforeClose"
      @close="handleCloseDialog"
      @open="openDialog"
    >
      <el-form
        ref="discountForm"
        :model="discountForm"
        label-width="120px"
        :rules="discountFormRules"
        style="width: 92%"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="折扣模板名称" prop="planName">
              <el-input v-model="discountForm.planName" placeholder="请输入折扣模板名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        ref="editList"
        v-loading="loading"
        border-bottom
        style="width: 100%; margin-top: 20px"
        class="table"
        :header-cell-style="{
          background: '#FAFAFA'
        }"
        :data="editList"
        @selection-change="SelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="checkSelectable" />
        <el-table-column type="index" :index="indexMethod" align="center" width="55" label="序号" />
        <el-table-column prop="cloudManufacturerName" label="云厂商" align="center" />
        <el-table-column prop="cloudProductName" label="云产品名称" align="center" />
        <el-table-column prop="cloudProductType" label="云产品类型" align="center" />
        <el-table-column prop="discount" label="折扣权限" align="center">

          <template slot-scope="scope">
            <el-input-number
              v-model.number="scope.row.discount"
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="10"
              placeholder="请输入折扣权限 ( 0.1 - 10.00 折 )"
              @change="handleChange"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              :row-key="row.id"
              size="small"
              type="text"
              icon="el-icon-circle-edit"
              @click="save(row)"
            >保存</el-button>
            <el-button
              :row-key="row.id"
              size="small"
              type="text"
              icon="el-icon-circle-edit"
              @click="nosave(row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-divider class="divider" content-position="left" />
      <el-button type="primary" size="small" @click="show = !show">+添加更多模板</el-button>

      <el-form
        v-show="show"
        ref="moduleForm"
        :model="moduleForm"
        label-width="100px"
        style="width: 92%"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="云厂商名称" prop="name">
              <el-select
                v-model="moduleForm.cloudManufacturerId"
                placeholder="请选择云厂商名称"
                clearable
                @change="changeSelect"
              >
                <el-option v-for="item in listCloud" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <el-form-item label="云产品名称" prop="cloudProductName">
              <el-select
                v-model="moduleForm.cloudProductName"
                placeholder="请选择云产品名称"
                clearable
              >
                <!-- <el-option label="区域一" value="shanghai" /> -->
                <el-option v-for="item in ListCloudProducts" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="云产品类型" prop="cloudProductType">
              <el-select
                v-model="moduleForm.cloudProductType"
                placeholder="请选择云产品类型"
                clearable
              >
                <el-option v-for="item in ListCloudProducts" :key="item.id" :label="item.type" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="-2">
            <el-form-item label-width="20px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="onSearch"
              >查询</el-button>
              <el-button
                icon="el-icon-refresh"
                @click.native="clearFrom"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-show="show"
        ref="discountModuleList"
        v-loading="loading"
        border-bottom
        style="width: 100%; margin-top: 20px"
        class="table"
        :header-cell-style="{
          background: '#FAFAFA'
        }"
        :data="discountModuleList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="checkSelectable" />
        <el-table-column type="index" :index="indexMethod" align="center" width="55" label="序号" />
        <el-table-column prop="cloudManufacturerName" label="云厂商" align="center" />
        <el-table-column prop="name" label="云产品名称" align="center" />
        <el-table-column prop="type" label="云产品类型" align="center" />
        <el-table-column prop="discount" label="折扣权限" align="center">

          <template slot-scope="scope">
            <el-input-number
              v-model.number="scope.row.discount"
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="10"
              placeholder="请输入折扣权限 ( 0.1 - 10.00 折 )"
              @change="handleChange"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              :row-key="row.id"
              size="small"
              type="text"
              icon="el-icon-circle-edit"
              @click="edit(row)"
            >保存</el-button>
            <el-button
              :row-key="row.id"
              size="small"
              type="text"
              icon="el-icon-circle-edit"
              @click="del(row)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <template v-slot:footer>
        <el-button
          style="margin-top: 12px"
          type="primary"
          @click="onSubmit"
        >确定</el-button>
        <el-button @click="handleCloseDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 获取云厂商列表 // 获取云厂商名称 // 获取云产品类型和名称 // 新增折扣模块// 编辑回显 //编辑确认
import { reqGetListPageCloudProducts, reqGetListCloudManufacturers, reqGetListCloudProducts,
  reqGetDiscountTemplateInfo,
  reqEditDiscountTemplate } from '@/api/discount'
export default {
  name: 'CloudControlTemplateEdit',
  props: {
    editTemplateShow: {
      type: Boolean,
      required: true
    },
    editId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      discountForm: {
        planName: '' // 折扣模板名称
      },
      discountFormRules: {
        planName: [{ required: true, message: '请输入折扣模板名称', trigger: 'blur' }]
      },
      moduleForm: {
        cloudManufacturerName: '', // 云厂商
        cloudProductName: '', // 云产品名称
        cloudProductType: '' // 云产品类型
      },
      pageSize: 1000,
      page: 1,
      total: 20,
      discountModuleList: [], // table数据
      multipleSelection: [],
      listCloud: [],
      ListCloudProducts: [],

      editList: [], // 编辑table数据
      Selection: [],
      show: false
    }
  },

  mounted() {

  },

  methods: {
    // 开启弹层
    openDialog() {
      this.getListPageCloudProducts()
      this.getListCloudManufacturers()
      this.getListCloudProducts()
    },
    // 查询
    onSearch() {
      this.getListPageCloudProducts()
      // console.log(this.moduleForm)
    },
    // 重置
    clearFrom() {
      this.moduleForm = {
        cloudManufacturerName: '', // 云厂商
        cloudProductName: '', // 云产品名称
        cloudProductType: '' // 云产品类型
      }
      this.getListPageCloudProducts()
    },
    // 编辑数据
    async reqGetDiscountTemplateInfo() {
      const { data: res } = await reqGetDiscountTemplateInfo(this.editId)
      console.log(res)
      this.editList = res.productList
      this.discountForm.planName = res.planName
      this.$refs.editList.toggleAllSelection()
    },
    // 编辑保存
    save(row) {
      this.$refs.editList.toggleRowSelection(row, true)
      this.$message.success('保存折扣权限成功')
    },
    // 取消
    nosave(row) {
      this.$refs.editList.toggleRowSelection(row, false)
      this.$message.success('已取消')
    },
    // 选中
    SelectionChange(val) {
      console.log(val)
      this.Selection = val
    },
    // 保存
    edit(row) {
      // console.log(row)
      // console.log(row.discount)
      if (!row.discount) return this.$message.warning('请输入折扣权限')
      // this.tempObj = row
      this.$refs.discountModuleList.toggleRowSelection(row, true)
      this.$message.success('保存折扣权限成功')
    },
    // 取消
    del(row) {
      // this.$refs.discountModuleList.clearSelection()
      this.$refs.discountModuleList.toggleRowSelection(row, false)
      this.$message.success('已取消')
    },
    // 数量框变化
    handleChange(value) {
      console.log(value)
    },
    // 获取 云厂商列表
    async getListPageCloudProducts() {
      this.loading = true
      const { data: res } = await reqGetListPageCloudProducts(this.page, this.pageSize, {
        ...this.moduleForm
      })
      this.discountModuleList = res.records
      this.total = res.total
      this.loading = false

      //   console.log(this.discountModuleList.filter(item => item.id.inclouds(this.editList.map(item => item.productId))))
    },
    // 获取云厂商名称
    async getListCloudManufacturers() {
      const res = await reqGetListCloudManufacturers()
      this.listCloud = res.data
      // console.log(res)
    },
    changeSelect(val) {
      this.moduleForm.cloudProductName = ''
      this.moduleForm.cloudProductType = ''
      this.getListCloudProducts()
    },
    // 获取云产品名称和 类型
    async getListCloudProducts() {
      const res = await reqGetListCloudProducts()
      this.ListCloudProducts = res.data.filter(item => item.cloudManufacturerId === this.moduleForm.cloudManufacturerId)
      // console.log(this.ListCloudProducts)
    },
    handleSizeChange(val) {
      this.page = val
      this.getListPageCloudProducts()
    },

    handleCurrentChange(val) {
      this.pageSize = val
      this.page = 1
      this.getListPageCloudProducts()
    },

    // reqEditDiscountTemplate

    // 确认
    async onSubmit() {
      this.$refs.discountForm.validate(async(valid) => {
        if (!valid) return
        if (this.multipleSelection.length <= 0 && this.Selection.length <= 0) return this.$message.error('请勾选折扣权限')
        const productListOwn = this.Selection.map((item, index) => {
          return Object.assign({}, { 'productId': item.productId, 'discount': item.discount })
        })
        const productListChoose = this.multipleSelection.map((item, index) => {
          return Object.assign({}, { 'productId': item.id, 'discount': item.discount })
        })
        const productList = productListOwn.concat(productListChoose)
        // console.log(productList)
        const Obj = {
          planName: this.discountForm.planName, // 折扣模板名称
          // type: 0, // 预留字段先传0或1,
          id: this.editId,
          productList
          // [{
          //   'productId': 0, // 从梁久庆那边查ID
          //   'discount': 10
          // }]
        }
        const res = await reqEditDiscountTemplate(Obj)
        // console.log(res)
        if (res.code === 200) this.$message.success('操作成功')
        this.handleCloseDialog()
        this.$emit('getlistTemplate')
      })
    },
    // 关闭弹层前
    async beforeClose(done) {
      const confirmResult = await this.$confirm(
        '内容还未保存，此操作会导致信息丢失！是否继续？',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult === 'cancel') return
      done()
    },
    // 取消
    handleCloseDialog() {
      this.$emit('update:editTemplateShow', false)
      this.show = false
      this.discountForm = {
        planName: '' // 折扣模板名称
      }
      this.moduleForm = {
        cloudManufacturerName: '', // 云厂商
        name: '', // 云产品名称
        type: '' // 云产品类型
      }
      this.$refs.discountForm.resetFields()
      this.$refs.moduleForm.resetFields()
    },
    // 选中当前行
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },

    checkSelectable(row, index) {
      // console.log(row, index)
      return row.discount >= 0 && row.discount <= 10
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 0px 20px !important;
}
.divider{
  margin-top: -2px;
}
</style>
A-sleep
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能就是，勾选复选框，高亮显示当前行，也就是当前行样式改变。这是一个非常常见的使用场景，官网给我们提供了一个带Checkbox的table表格，但是并没有给出上述使用案例，解决办法有很多，我简单总结下我自己的实现过程，希望能帮助到有同样需求的小伙伴。 勾选表格中当前项时会触发selection-change事件，在中绑定handleSelectionChange方法。 编
elementui table 默认勾选
Teler的博客
11-30 1592
html table <el-table :stripe="true" style="width: 100%" border highlight-current-row ref="table" :data="tableData" row-key="id"> </el-tab...
一文读懂ElementUI中的toggleSelection()函数
最新发布
码农研究僧的博客
04-13 1139
大致讲解toggleSelection函数的使用以及原理
elementui实现表格(el-table)默认选中
weixin_53954018的博客
09-24 3387
遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致（两者之间共同的标识即可，一般以id做判断）// 把判断出来的默认表格数据push到创建的数组中。//遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致。把判断出来的默认表格数据push到创建的数组中。//再遍历数组，将数据放入方法中。//创建一个空数组用来存放默认数据。label="日期"label="姓名"label="地址"创建一个空数组用来存放默认数据。再遍历数组，将数据放入方法中。
Vue3 element plus 中table组件多选，默认根据接口返回条件选中
Feast_aw的博客
07-24 2204
【代码】Vue3 element plus 中table组件多选，默认根据接口返回条件选中。
ElementUI el-table 单选、多选以及点击某一行的任意位置就勾选上
weixin_58101575的博客
03-15 5271
【代码】ElementUI el-table点击某一行的任意位置就勾选上。
ElementUI的table默认勾选
itlsq的博客
03-29 6105
// data中有两个值：docList表示table的数据源，docSelection表示默认勾选项，docTable是表格的ref mounted () { let arr = [] this.docList.forEach(item => { this.docSelection.forEach(val => { if (va...
element-ui的table表格的多选框默认选中
細水、長流√的专栏
02-18 9109
场景分析： 进入页面编辑表格的时候，表格的多选框后台记住勾选的处于默认选中状态。 解决办法： 可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选 代码如下： data(){ return{ listData:[],//当前的table的数据 hasSelectList:[],//已经选择的id组成的数组 } } this.$nextTick(()=>{ this.listData.forEach(row => {
【项目经验】：elementui多选表格默认选中
weixin_70245286的博客
09-17 3313
elementui多选表格默认选中
element表格默认勾选
weixin_41700532的博客
01-03 2963
使用表格的时候，偶尔会需要回勾上一次勾选的数据（默认勾选）； 主要是用到了默认提供的方法：toggleRowSelection(row,boolean) this.allData.forEach(item => { this.$refs.table.toggleRowSelection(item,true);//设置默认勾选 }) 还需要使用reserve-selection...
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
监听element-ui table滚动事件的方法
10-17
主要介绍了监听element-ui table滚动事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
VUE.js+element-ui实现JSON编辑器
07-24
使用vue.js和element-ui实现的网页版的JSON编辑器，使用之前需要安装NODE.js和npm
Element table 表格默认勾选
qq_38468358的博客
12-13 2807
需求： 父组件一组数据，子组件是表格数据，父组件的数据需要在子组件表格中进行默认勾选； 代码如下： 在 table 提供了这样一个方法toggleRowSelection： HTML代码： <template> <el-table ref="multipleTable" :data="tableData" ...
elementui表格默认选中
weixin_45766506的博客
08-21 2013
重点： 一般地，我们是用接口返回的数据去渲染elementui的Table表格，而这里如果要实现默认选中的效果，就必须要有一下的条件： 1、一定要接口返回数据之后才进行默认选中的操作，即用 this.$nextTick(function() {...}),在里面进行默认选中的操作； 2、一定要用el-table标签里面的data属性的那个数组去用forEach循环体(试过用for循环不行)中用 this.$refs.****.toggleRowSelection(row,true);实现默认选中 不多说
elementui 中 table 默认勾选某些项
qq_33864480的博客
04-02 1462
获取表格数据列表后，对已选中的项做默认选中操作 toggleRowSelection 方法，两个参数，第一个为list里面的item项，第二个设置为true即可。 this.listData.forEach(item => { if (item.is_selected === 1) { this.$refs.tableName.toggleRowSelection(...
Element-UI el-table 勾选中某一项 取消选中某一项
05-20
在 Element-UI 的 el-table 中，如果要实现勾选中某一项和取消选中某一项的功能，需要使用 el-table 的 selection 属性与 @selection-change 事件。 首先，在 el-table 标签中设置 selection 属性为一个数组，用来存储被勾选的行数据，如下所示： ```html <el-table :data="tableData" :selection="selectedList" @selection-change="handleSelectionChange"> ``` 其中，tableData 是 el-table 的数据源，selectedList 是存储被勾选的行数据的数组。 接下来，在 methods 中定义 handleSelectionChange 方法，用来处理勾选和取消勾选的逻辑，如下所示： ```javascript methods: { handleSelectionChange(selection) { this.selectedList = selection; } } ``` 在该方法中，我们将 el-table 的 selection 属性设置为传入的 selection 数组，这样就可以实现勾选和取消勾选的功能了。 如果需要在 el-table 中显示勾选框，可以使用 el-table-column 的 type 属性，如下所示： ```html <el-table-column type="selection" width="55"></el-table-column> ``` 这样就可以在 el-table 的每一行前面显示一个勾选框了。同时，也可以在 el-table-column 中设置 selectable 属性，来控制某一行是否可以被勾选，如下所示： ```html <el-table-column type="selection" width="55" :selectable="row => row.status === 'active'"></el-table-column> ``` 在该示例中，只有 row.status 属性值为 'active' 的行才能被勾选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值