搜索组件--列表组件--分页组件

最新推荐文章于 2023-03-28 19:38:31 发布

csstmg

最新推荐文章于 2023-03-28 19:38:31 发布

阅读量482

点赞数 1

分类专栏：前端 element

本文链接：https://blog.csdn.net/csstmg/article/details/119301551

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

搜索组件

<template>
  <div class="search-content-box">
    <el-form
      ref="ruleForm"
      :label-width="formdata.labelWidth"
      :inline="formdata.inline"
      class="demo-form-inline"
      :model="formdata"
    >
      <el-form-item
        v-for="(item,index) in formdata.formprops"
        :key="'form'+index"
        :label="item.label"
        :rules="item.required || []"
        :prop="'formprops.' + index + '.value'"
      >
        <!-- input -->
        <el-input
          v-if="item.formtype==='input'"
          v-model="item.value"
          :type="item.type=='textarea'?'textarea':'input'"
          :clearable="item.clearable"
          :style="item.style || ''"
          :class="item.className || ''"
          :size="item.size ||'small' "
          :maxlength="item.maxlength||''"
          :prefix-icon="item.prefix || ''"
          :placeholder="item.placeholder"
          :disabled="item.disabled"
          @keyup.native.enter="search"
          @change="val => {inputChange(val,item.change)}"
        />
        <!-- inputNumber -->
        <el-input-number
          v-else-if="item.formtype==='inputNumber'"
          v-model="item.value"
          :clearable="item.clearable"
          :controls="false"
          :style="item.style || ''"
          :min="1"
          :max="10"
        />
        <!-- select或者远程搜索 -->
        <el-select
          filterable
          v-else-if="item.formtype==='select'"
          v-model="item.value"
          :clearable="item.clearable"
          :remote="item.remote"
          :size="item.size ||'small' "
          :reserve-keyword="item.reserveKeyword"
          :remote-method="item.remoteMethod"
          :multiple="item.multiple"
          :collapse-tags="item.collapseTags"
          :style="item.style || ''"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
           @change="val => {selectChange(val,item.change)}"
          @visible-change="val => {selectVisibleChange(val,item.visibleChange,item.value)}"
        >
          <el-option
            v-for="(selitem,idx) in item.data()"
            :key="idx+'select-s'"
            :label="selitem.label"
            :value="selitem.value"
          />
        </el-select>
        <!-- date -->
        <el-date-picker
          v-else-if="item.formtype==='date'"
          v-model="item.value"
          :clearable="item.clearable"
          :type="item.datetype"
          range-separator="至"
          :size="item.size ||'small' "
          :class="item.datetype == 'daterange'?'cl-change':'cl-nomal'"
          :value-format="item.format"
          :format="item.formatInput ? item.formatInput: ''"
          :placeholder="item.placeholder"
          :start-placeholder="Array.isArray(item.placeholderarr)?item.placeholderarr[0]:''"
          :end-placeholder="Array.isArray(item.placeholderarr)?item.placeholderarr[1]:''"
          :picker-options="item.pickerOptions"
        />
        <!-- cascader级联 -->
        <el-cascader
          v-else-if="item.formtype==='cascader'"
          v-model="item.value"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :filterable="item.filterable"
          :options="item.data()"
          :props = item.props||optionProps
          :size="item.size ||'small' "
          :style="item.style || ''"
          @change="val => {handleChange(val,item.change)}"
        >
          <!-- <template slot-scope="{ node, data }">
            <el-tooltip
              :disabled="data.departmentName.length < 11"
              class="item"
              effect="dark"
              :content="data.departmentName"
              placement="top-start"
            >
              <span>{{ hideWords(data.departmentName) }}</span>
            </el-tooltip>
          </template> -->
        </el-cascader>
        <!-- text -->
        <span v-else-if="item.formtype==='text'" :style="item.style || ''" v-html="item.value" />
        <!-- 其他 -->
        <template v-else-if="item.formtype==='render'">
          <expand-dom :column="item" :render="item.render" />
        </template>
        <slot :name="index" />
      </el-form-item>
      <el-form-item v-if="!formdata.bottonflag">
        <el-button
          type="primary"
          class="search-btn"
          size="small"
          icon="el-icon-search"
          @click="search"
        >{{ formdata.btntext }}</el-button>
        <!-- <slot name="last" /> -->
      </el-form-item>
      <el-form-item>
        <slot name="last" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { hideWordsItem } from '@/utils'
export default {
  components: {
    expandDom: {
      functional: true,
      props: {
        render: Function,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {};
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      }
    }
  },
  props: ["formdata"],
  data() {
    return {
     optionProps:{
        value: 'value',
        label: 'label',
        children: 'children',
      },
      arr: {}
    };
  },
  computed: {},
  created() {},
  methods: {
    hideWords(val) {
      return hideWordsItem(val, 15);
    },
    search() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.formdata.formprops.map(item => {
            if (!item.key) {
              return;
            }
            if (Array.isArray(item.key)) {
              if (item.value === null) {
                item.value = [];
              }
              item.key.map((arr, index) => {
                this.arr[item.key[index]] = item.value[index];
              });
            } else {
              if (item.formtype === "cascader" && !item.level) {
                item = JSON.parse(JSON.stringify(item));
                // console.log('单个')
                // this.arr[item.key] = item.value.splice(item.value.length - 1)
                this.arr[item.key] = item.value.length
                  ? [
                      item.value.length,
                      item.value.splice(item.value.length - 1).join()
                    ]
                  : item.value; // 后期可能要传出层级按钮
              } else if (item.formtype === "cascader" && item.level) {
                // console.log('多个')
                item = JSON.parse(JSON.stringify(item));
                this.arr[item.key] = item.value;
              } else {
                // if(item.value == '') {
                //   item.value = null
                // }
                this.arr[item.key] = item.value;
                // console.log('ceshi',  this.arr[item.key])
                // console.log('item.value', item.value)
              }
            }
          });
          this.$emit("searchFn", this.arr);
        } else {
          this.arr = {};
          return false;
        }
      });
      return this.arr;
    },
    filterMethod(val, filter) {
      if (filter) {
        console.log(val, filter, "filter变化");
        return this.$emit("filterMethod", val);
      }
    },
    selectChange(val, change) {
      if (change) {
        console.log(val, change, 'change变化')
        return this.$emit('selectChange', val)
      }
    },
    selectVisibleChange(val, change, item) {
      if (change && !val) {
        return this.$emit("selectVisibleChange", item);
      }
    },
    inputChange(val, change) {
      if (change) {
        return this.$emit("inputChange", val);
      }
    },
    handleChange(val, change) {
      if (change) {
        console.log(val,'val')
        return this.$emit("cascaderChange", val);
      }
    },
  }
};
</script>
<style lang='scss' scoped>
@import "@/styles/base";
.search-content-box {
  // /deep/.el-input__inner {
  //   height: 32px;
  // }
  /deep/ .el-form-item__content{

    .el-date-editor .el-range-separator{
      padding:0px;
    }
  }
  // border-top: solid 1px #efefef;
  // padding-top:24px;
  padding:24px 24px 0 24px;
  background: #fff;
  /deep/ .el-form-item{
    margin-bottom:24px;
  }
  // /deep/ .el-range-editor--small.el-input__inner {
  //   width: 350px;
  // /deep/ .el-range-editor--small.el-input__inner{
  //     width: 330px;
  // }
  .cl-change{
      width: 310px;
  }
}
/deep/.el-form-item__content {
  line-height: 32px;
}

</style>

搜索组件使用

<searchForm :formdata="formdata" @searchFn="searchFn" ref="searchForm">
        <template slot="last">
          <el-button
            class="onresetClickAdvan"
            size="small"
            icon="el-icon-refresh-left"
            @click="resetSearch"
            >重置</el-button
          >
        </template>
      </searchForm>


 formdata: {
        // 搜索组件数据
        inline: true, // true 横向false竖向
        bottonflag: false, // 查询按钮 true 是不显示
        btntext: '查询',
        labelWidth: '90px',
        formprops: [
          {
            placeholder: '请输入溯源海报名称',
            formtype: 'input',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'codeName'
          },
          {
            placeholder: '二维码状态',
            formtype: 'select',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'status',
            data: () => {
              return this.statusArr
            }
          },
          {
            placeholder: '活动渠道',
            formtype: 'select',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'actType',
            data: () => {
              return this.channelArr
            }
          },
          {
            formtype: 'date',
            datetype: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            size: 'small',
            placeholderarr: ['活动开始时间', '活动结束时间'],
            pickerOptions: '',
            clearable: true,
            filterable: true,
            value: [],
            key: ['actStartTime', 'actEndTime']
          }
        ]
      }

tabel 组件

<template>
  <div class="zd-content-page-box">
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      ref="multipleTable"
      :height="tableHeight"
      style="width: 100%"
      :header-cell-style="{background:'#F2F4F7',fontSize: '15px',fontWeight: '400',color:'#303133'}"
      empty-text
      @selection-change="handleSelectionChange"
    >
      <!-- 无数据提示 -->
      <slot slot="empty" >{{noData}}</slot>
      <!-- 勾选框 -->
      <el-table-column v-if="selection" type="selection" width="60" :fixed="selectionFixed" :selectable = 'selectDisableRoom' ></el-table-column>
      <template v-for="(item, index) in tableColumns">
        <!-- 操作 -->
        <slot v-if="item.slot" :name="item.slot"></slot>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="item.minWidth"
          :width="item.width ? item.width : ''"
          :align="item.align ?item.align : 'center'"
          :sortable="item.sortable ?item.sortable :false"
          :show-overflow-tooltip="item.showTooltip ? item.showTooltip :false"
        >
          <template slot-scope="scope">
            <span>{{ handelData(scope.row[item.prop]) }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="total > 0">
      <!-- 分页 -->
      <pagination :pageNum="page" :pageSize="rows" :total="total" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange"></pagination>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/pagination'
import { stringify } from 'querystring'
import { toUnicode } from 'punycode'
export default {
  components: {
    pagination
  },
  props: {
    tableData: {
      // 表格数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumns: {
      // 表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableHeight: {
      // 表格高度
      type: Number || String,
      default: () => {
        return null
      }
    },
    selectionFixed: {
      // 列固定
      type: Boolean || String,
      default: () => {
        return false
      }
    },
    fixed: {
      // 列固定
      type: Boolean || String,
      default: () => {
        return false
      }
    },
    selection: {
      // 勾选框
      type: Boolean,
      default: () => {
        return false
      }
    },
    noData: {
      type: String,
      default: () => {
        return '暂无数据'
      }
    },
    total: {
      // 总页数
      type: Number || String,
      default: () => {
        return 0
      }
    },
    page: {
      // 当前页
      type: Number || String,
      default: () => {
        return 1
      }
    },
    rows: {
      // 页码
      type: Number || String,
      default: () => {
        return 10
      }
    },
    tableLoading: {
      type: Boolean,
      default: () => {
        return false
      }
    }
    // selectDisableRoom: {
    //   type: Function,
    //   default:()=>{
    //     return
    //   }
    // }
    // isPagination: {
    //   // 是否显示分页
    //   type: Boolean,
    //   default: () => {
    //     return true;
    //   }
    // }

  },
  data () {
    return {

    }
  },
  mounted () {},
  methods: {
    selectDisableRoom (row, index) {
      if (row.select) {
        return false
      }
      return true
    },
    handelData (val) {
      if (val == '0') {
        return '0'
      } else if (val) {
        return val
      } else {
        return '--'
      }
    },
    // 多选事件
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    // 切换当前一页展示多少条
    handleSizeChange (val) {
      this.$emit('handleChange', { pageSize: val, pageNum: 1 })
    },
    // 翻页
    handleCurrentChange (val) {
      console.log('handleCurrentChange', val)
      this.$emit('handleChange', { pageNum: val, pageSize: this.rows })
    }
  }
}
</script>
<style lang="scss" scoped>
.zd-content-page-box {
  width: 100%;
  /deep/ .el-table thead {
    color: #909399;
    font-weight: 500;
  }
  /deep/ .el-table--border th,
  .el-table__fixed-right-patch {
    background: rgb(242, 244, 247);
  }
}
//  /deep/.el-tabs {
//     .el-tabs__header {
//       margin-bottom: 14px;
//     }
//     .el-tabs__item span {
//       padding: 0 8px;
//     }
//     .btn-group {
//       display: inline-block;
//     }
//     .is-active {
//       font-weight: bold;
//     }
//   }
</style>

table 使用

 <myTable
        ref="myTable"
        :tableData="tableData"
        :tableColumns="tableColumns"
        :selection="true"
        :total="total"
        :rows="page.pageSize"
        :page="page.pageNum"
        @handleChange="handleChange"
      >
        <el-table-column slot="forceTime" label="有效时间">
          <template slot="header" slot-scope="">
            有效时间
            <el-popover
              placement="top-start"
              title="说明"
              width="200"
              trigger="hover"
              content="有效时间：溯源二维码的有效使用时间。"
            >
              <i
                slot="reference"
                style="color: #999"
                class="el-icon-question"
              ></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <p>{{ scope.row.forceTime }}</p>
          </template>
        </el-table-column>
        <el-table-column slot="activice" label="关联活动">
          <template slot-scope="scope">
            <div class="code-link-icon">
              <i @click="openDialogAct(scope.row)" class="el-icon-link"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          slot="operate"
          label="操作"
          align="center"
          width="180px"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="code-list-opreat">
              <el-button
                type="text"
                v-if="scope.row.status !== 0 && scope.row.status !== 1"
                @click="goDateListBtn(scope.row)"
                >数据统计</el-button
              >
              <el-button type="text" @click="goPreviewRootBtn(scope.row)"
                >预览</el-button
              >
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="scope.row.status == 0"
                    @click.native="seoQrcodeBtn(scope.row)"
                    >推广</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="
                      scope.row.status == 0 ||
                      scope.row.status == 1 ||
                      scope.row.status == 2
                    "
                    @click.native="editQrcodeBtn(scope.row)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="delQrcodeBtn(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </myTable>

tabel 里面可以使用插槽 slot 改变样式问题

   tableColumns: [
        // 表头数据
        { label: '溯源海报名称', prop: 'codeName', minWidth: '180' },
        { label: '活动渠道', prop: 'actTypeDes', showTooltip: true },
        { label: '有效时间', prop: 'forceTime', slot: 'forceTime' },
        { label: '状态', prop: 'statusDes' },
        { label: '关联活动', slot: 'activice' },
        { label: '操作', prop: 'name4', slot: 'operate' }
      ],

mixins 里面的方法

import request from '@/base/service'
// const baseURL = process.env.VUE_APP_MARKETING_API

const requestB = (data) => {
  return request({
    ...data,
    ...{
      baseURL: this.urlList.list.baseURL
    }
  })
}

export const tableMixin = {
  data() {
    return {
      // 搜索填充数据
      formdata: [],
      // 搜索数据
      searchData: {},
      // 分页
      page: {
        pageSize: 10,
        pageNum: 1
      },
      // 数量
      total: 0,
      // 数据
      tableData: [],
      // 表字段
      tableColumns: [],
      // loading动画
      tableloading: false
    }
  },
  computed: {

  },
  /**
     * @desc  export const urlList = {
                            list: {
                            url: '/backSourceCode/pageList',
                            method: 'post',
                            baseUrl:process.env.VUE_APP_MARKETING_API
                            }
                        }
    */
  methods: {
    // 获取列表数据
    getData() {
      const that = this
      that.tableloading = true
      // 传入api  api类型   搜索信息（父页面定义）
      const params = {
        url: that.urlList.list.url,
        method: that.urlList.list.method.toUpperCase() === 'POST' ? 'post' : 'get',
        baseURL: that.urlList.list.baseURL
      }
      if (that.urlList.list.method.toUpperCase() === 'POST') {
        params.data = that.getClearJson({ ...that.searchData, ...that.page })
      } else {
        params.params = that.getClearJson({ ...that.searchData, ...that.page })
      }
      request(params).then(res => {
        that.tableData = that.Global.transformEmptyObject(res.data.list) // 列表信息为空 时转换成--
        that.total = Number(res.data.total)
      }).finally(() => {
        that.tableloading = false
      })
    },
    // 分页改变
    handleChange (val) {
      this.page = { ...val }
      this.getData()
    },
    // 删除方法
    handel_del(key, method, val) {
      const that = this
      this.$confirm({
        title: '温馨提示',
        msg: '确认删除吗？'
      }).then(() => {
        var reqdata = {}
        reqdata[key] = val
        const params = {
          url: that.urlList.list.del,
          method: that.urlList.list.method.toUpperCase() === 'POST' ? 'post' : 'get',
          baseURL: that.urlList.list.baseURL
        }
        if (that.urlList.list.method.toUpperCase() === 'POST') {
          params.data = that.getClearJson({ ...reqdata })
        } else {
          params.params = that.getClearJson({ ...reqdata })
        }
        request(params).then((res) => {
          if (res.code === 200) {
            that.$Message.success('删除成功')
            that.getData()
          } else {
            that.$Message.error(res.message)
          }
        })
      })
    },
    // 搜素
    searchFn (val) {
      this.searchData = { ...val }
      this.page.pageNum = 1
      this.getData()
    },
    // 重置
    resetSearch () {
      this.$nextTick(() => {
        const searchForm = this.$refs.searchForm
        searchForm.$refs.ruleForm.resetFields()
        this.page.pageNum = 1
        this.getData()
      })
    },
    // 清除请求中的空字段
    getClearJson(data) {
      const _data = {}
      for (const prop in data) {
        const item = data[prop]
        if (item != undefined && item) {
          _data[prop] = item
        }
      }
      return _data
    }
  }
}

csstmg

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
搜索组件--列表组件--分页组件

搜索组件<template> <div class="search-content-box"> <el-form ref="ruleForm" :label-width="formdata.labelWidth" :inline="formdata.inline" class="demo-form-inline" :model="formdata" > <el-form.
复制链接

扫一扫