Vxe Table批量复制列数据功能

最新推荐文章于 2024-05-09 09:20:19 发布

Teln_小凯

最新推荐文章于 2024-05-09 09:20:19 发布

阅读量900

点赞数 1

分类专栏： VUE 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq873113580/article/details/128731461

版权

VUE 专栏收录该内容

88 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js中自定义表格列头插槽来实现批量复制功能。通过定义`batch_header`插槽，添加批量操作提示和事件监听，用户可以点击触发批量复制特定列数据。同时，文章提到了配置表格列、处理选中行以及批量复制的数据对象规则。

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

效果图

定义表格列头插槽：

<!-- 批量功能 -->
      <template #batch_header="{ column }">
        <span>{{ column.title }}</span>
        <el-tooltip class="item" effect="dark" content="批量自动填充列数据" placement="top"><span class="batch-title" @click="clickBatchData(column)">批量</span></el-tooltip>
      </template>


css


::v-deep .batch-title {
  cursor: pointer;
  border: 1px solid rgb(117, 117, 117);
  border-radius: 6px;
  padding: 0 3px;
  margin: 2px;
}
::v-deep .batch-title:hover {
  color: #409eff;
}

table的Colum配置把想要的列指向插槽

slots: { header: 'batch_header' }



columns: [
                  { type: 'seq', width: 60, fixed: 'left' },
                  { type: 'radio', title: 'ID', width: 120, fixed: 'left' ,slots: { header: 'batch_header' }},
                  { field: 'name', title: 'Name', minWidth: 160, sortable: true },
                  { field: 'email', title: 'Email', minWidth: 160 },
                  { field: 'nickname', title: 'Nickname', sortable: true, minWidth: 160 },
                  { field: 'age', title: 'Age', visible: false, sortable: true, width: 100 },

定义要复制的数据对象规则：

//批量复制的字段: { gysmc: [这里代表最终要复制几个值,'gysid','gysmc']}
    batchData: {
      type: Object,
      default: () => null,
    },

设置选中的行

@cell-click="cellClick"


 // 点击表格row 单元格事件
    cellClick({ row }) {
      this.curRow = row;

批量点击的功能：

clickBatchData(col) {
      //1、批量复制的字段::batchData = { gysmc: [这里代表最终要复制几个值,'gysid','gysmc']}
      //2、在getTableheader后台数据库写死，或者前台写死item.slots= { header: 'batch_header' };
      //this.batchData={ gysmc: ['gysmc'] };

      if (this.curRow == null) {
        this.$alert('请选择要批量复制的起始行')
        return
      }
      if(this.batchData==null){
        this.$alert('请配置要批量复制的字段')
        return
      }
      var val = this.curRow[col.field];
      this.$confirm('确定批量复制【' + val + '】?', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var copyIndex = -1
        // 默认获取数组第一行数据进行赋值
        const $table = this.$refs.vxe_table;
        let newList = [...$table.getTableData().tableData]
        if (newList.length) {
          let temp = this.curRow
          newList.forEach((el, index) => {
            if (copyIndex == -1 && el._X_ID == temp._X_ID) {
              copyIndex = index
            }
            if (copyIndex != -1 && index > copyIndex) {
              //修改的字段
              var fields = this.batchData[col.field];
              for(var field of fields){
                el[field] = temp[field]
              }
            }
          })
          $table.createData(newList)
          this.curRow = null
        }
      });
    },