el-table每列增加筛选

效果图

el-table每列增加筛选_第1张图片

<el-table-column
                prop="strTermNum"
                label="XX编号"
                width="150px"
                :render-header="renderStrTermNum"
              />

renderStrTermNum(h, { column, $index }, index) {
      return (
        <span>
          XX编号 &nbsp;&nbsp;
          <el-popover
            placement="bottom"
            width="200"
            height="200"
            trigger="click"
            v-model={this.visible}
          >
            <span slot="reference">
              <i
                class="el-icon-arrow-down"
                // style={this.search ? { color: "red" } : { color: "blue" }}
              ></i>
            </span>
            <el-input
              size="small"
              v-model={this.search}
              placeholder="请输入XX编号"
            ></el-input>
            <div class="el-table-filter__bottom">
              <button
                class={this.search ? '' : 'is-disabled'}
                on-click={this.filter1111}
              >
                筛选
              </button>
              <button on-click={this.clearSearch}>重置</button>
            </div>
          </el-popover>
        </span>
      )
    },


<el-table-column
                v-if="isbank === true"
                prop="versionType"
                sortable
                label="新老XX"
                width="150px"
                :filters="[
                  { text: '新XX', value: 0 },
                  { text: '老XX', value: 1 },
                ]"
                :filter-method="filterHandler"
              >
                <template slot-scope="scope">
                  <span
                    >{{
                      scope.row.versionType === 1 ? '老XX' : '新XX'
                    }}&emsp;&emsp;</span
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="handleClick2(scope.row)"
                    >切换</el-button
                  >
                </template>
              </el-table-column>

你可能感兴趣的:(javascript)