效果图

 

定义表格列头插槽:

<!-- 批量功能 -->
      <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
        }
      });
    },

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐