vue + el-table 对表头每个字段进行操作

HZM_CSDN

已于 2022-11-15 22:52:31 修改

阅读量849

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-11 17:40:07 首次发布

本文链接：https://blog.csdn.net/HZM_CSDN/article/details/127809869

版权

一. 通过对表头的图标按钮点击, 然后操作当前列数据 , 如图:

el-select里的复选框,代码如下:

        <el-table-column
           v-for="(column,index) of bindTableColumns"
           :key="'tab_'+index+column.id"
           :prop="column.prop"
           :label="column.label"
           :align="column.align"
           :width="column.width"
           show-overflow-tooltip
           scoped-slot
          >
          <template #header> // 具名插槽简写
              <span>{{column.label}}</span>
                <el-popover
                  placement="bottom"
                  width="100%"
                  trigger="click"
                  @after-enter="popoverChange(column.prop)"
                  >                
                  <el-row style="margin-bottom:10px;">
                    <el-button type="primary" size="mini" class="el-icon-sort-up" @click="ascHandle(column.prop,'asc')">升序</el-button>
                    <el-button type="primary" size="mini" class="el-icon-sort-down" @click="descHandle(column.prop,'desc')">降序</el-button>
                    <el-button type="primary" size="mini" @click="queryContent(column.prop)">查询</el-button>
                  </el-row>
                    <el-divider content-position="left">内容筛选</el-divider>
                  <el-row>
                    <el-select
                      placeholder="请选择"
                      size="small"
                      v-model="checkedCols"
                      clearable
                      filterable
                      multiple
                      collapse-tags
                      @change="handleSelectChange"                      
                      >
                        <el-checkbox :indeterminate="isIndeterminatePop" style="margin-left:20px;" size="mini" v-model="checkAllPop" @change="handleAllPop">(全选)</el-checkbox>
                        <el-checkbox-group v-model="checkedCols">
                           <el-option
                              style="display:block;margin-left:10px;"
                              v-for="item in tableHeaderList"
                              :key="item.value"
                              :label="item.FIELD"
                              :value="item.ROW_ID"
                              >
                              <el-checkbox :label="item.FIELD">{{ item.FIELD }}&nbsp;({{item.NUM}})</el-checkbox>
                           </el-option>
                        </el-checkbox-group>
                      </el-select>
                  </el-row>
                  <el-row style="margin: 20px 0 0 100px;">
                    <!-- <el-button type="primary" size="mini">取消</el-button> -->
                  </el-row>
                       <i class="el-icon-caret-bottom" v-if="column.type != 'show'" slot="reference" style="padding-left:5px;"></i>
                </el-popover>
          </template>
        </el-table-column>

data() { return {

}}

methods里的逻辑:

    /* -------------------& 表头功能操作 &---------------------- */
    popoverChange(event) {
      // console.log("event-##",event);
      this.getNumAndGroup({field:event});
      this.checkedCols = [];
    },
    // 全选操作
    handleAllPop(val) {
      let columnOptionKeys = [];
      this.tableHeaderList.forEach(item => {
        columnOptionKeys.push(item.FIELD);
      });
      this.checkedCols = val ? columnOptionKeys : [];
      this.isIndeterminatePop = false;
    },
    // 下拉框事件
    handleSelectChange(value) {
      let checkedCount = value.length;
      this.checkAllPop = checkedCount === this.tableHeaderList.length;
      this.isIndeterminatePop = checkedCount > 0 && checkedCount < this.tableHeaderList.length;
    },
    // 升序操作
    ascHandle(event,type) {
      this.formInfo.sort = '';
      this.formInfo.fieldName = event;
      if (type == 'asc') {
        this.querySummaryDataList(this.formInfo);
      }
    },
    // 降序操作
    descHandle(event,type) {
      this.formInfo.sort = 'desc';
      this.formInfo.fieldName = event;
      if (type == 'desc') {
        this.querySummaryDataList(this.formInfo);
      }
    },
    // 搜索查询
    queryContent(event) {
      this.formInfo[event] = this.checkedCols.toString();
      this.querySummaryDataList(this.formInfo);
    },