1.准备在filter表头过滤时做后台查询过滤，但无法获取是哪一列
2.avue-crud的filter-change事件中未封装column信息，这样在filter-change方法回调的时候，参数里只有默认的column信息，如果过滤的表头过多，无法判断是哪个列的过滤改变
3.查看column.vue源码发现没有对el-table-colum加入column-key属性

1.修改avue-crud源码中的column.vue,在el-table-column中加入属性:column-key=“column.columnKey”

<!--此为avue-crud中的源码，实际源码按官网为准，这里只做示范-->
<template>
    <slot name="header"></slot>
    <!-- 动态列 -->
    <template v-for="(column,index) in list">
      <column-dynamic v-if="column.children && column.children.length"
                      :columnOption="column"
                      :key="column.label">
        <template v-for="item in crud.mainSlot"
                  slot-scope="scope"
                  :slot="item.prop">
          <slot v-bind="scope"
                :name="item.prop"></slot>
        </template>
        <template v-for="item in crud.headerSlot"
                  slot-scope="scope"
                  :slot="crud.getSlotName(item,'H')">
          <slot v-bind="scope"
                :name="crud.getSlotName(item,'H')"></slot>
        </template>
        <template v-for="item in crud.mainSlot"
                  slot-scope="scope"
                  :slot="crud.getSlotName(item,'F')">
          <slot v-bind="scope"
                :name="crud.getSlotName(item,'F')"></slot>
        </template>
      </column-dynamic>
      <template v-else-if="!['dynamic'].includes(column.type)">
        <el-table-column v-if="vaildColumn(column)"
                         :key="column.prop"
                         :prop="column.prop"
                         :label="column.label"
                         filter-placement="bottom-end"
                         :filters="handleFilters(column)"
                         :filter-method="column.filter? handleFiltersMethod : undefined"
                         :filter-multiple="vaildData(column.filterMultiple,true)"
                         :show-overflow-tooltip="column.overHidden"
                         :min-width="column.minWidth"
                         :sortable="column.sortable"
                         :render-header="column.renderHeader"
                         :align="column.align || tableOption.align"
                         :header-align="column.headerAlign || tableOption.headerAlign"
                         :column-key="column.columnKey"
                         :width="column.width"
                         :fixed="crud.isMobile?false:column.fixed">
          <template slot="header"
                    slot-scope="scope">
            <slot :name="crud.getSlotName(column,'H')"
                  v-if="crud.$scopedSlots[crud.getSlotName(column,'H')]"
                  v-bind="Object.assign(scope,{column})"></slot>
            <template v-else>{{column.label}}</template>
          </template>
          <template slot-scope="{row,$index}">
            <el-form-item :prop="crud.isTree?'':`list.${$index}.${column.prop}`"
                          :label="vaildLabel(column,row,' ')"
                          v-if="row.$cellEdit && column.cell"
                          :label-width="vaildLabel(column,row,'1px')"
                          :rules='column.rules'>
              <slot v-bind="{
                      row:row,
                      dic:crud.DIC[column.prop],
                      size:crud.isMediumSize,
                      index:$index,
                      disabled:crud.btnDisabledList[$index],
                      label:handleShowLabel(row,column,crud.DIC[column.prop]),
                      '$cell':row.$cellEdit
                    :name="crud.getSlotName(column,'F')"
                    v-if="crud.$scopedSlots[crud.getSlotName(column,'F')]"></slot>
              <form-temp v-else
                         :column="column"
                         :size="crud.isMediumSize"
                         :dic="(crud.cascaderDIC[$index] || {})[column.prop] || crud.DIC[column.prop]"
                         :props="column.props || tableOption.props"
                         :readonly="column.readonly"
                         :disabled="crud.disabled || tableOption.disabled || column.disabled  || crud.btnDisabledList[$index]"
                         :clearable="vaildData(column.clearable,false)"
                         v-bind="$uploadFun(column,crud)"
                         v-model="row[column.prop]"
                         @change="columnChange(index,row,column)">
              </form-temp>
            </el-form-item>
            <slot :row="row"
                  :index="$index"
                  :dic="crud.DIC[column.prop]"
                  :size="crud.isMediumSize"
                  :label="handleShowLabel(row,column,crud.DIC[column.prop])"
                  :name="column.prop"
                  v-else-if="crud.$scopedSlots[column.prop]"></slot>
            <template v-else>
              <span v-if="['img','upload'].includes(column.type)">
                <div class="xiaoi-crud__img">
                  <img v-for="(item,index) in getImgList(row,column)"
                       :src="item"
                       :key="index"
                       @click="openImg(getImgList(row,column),index)" />
                </div>
              </span>
              <span v-else-if="['url'].includes(column.type)">
                <el-link v-for="(item,index) in corArray(row[column.prop],column.separator)"
                         type="primary"
                         :key="index"
                         :href="item"
                         :target="column.target || '_blank'">{{item}}</el-link>
              </span>
              <span v-else-if="['rate'].includes(column.type)">
                <xiaoi-rate disabled
                           v-model="row[column.prop]" />
              </span>
              <span v-else
                    v-html="handleDetail(row,column)"></span>
            </template>
          </template>
        </el-table-column>
      </template>
    </template>
    <slot name="footer"></slot>
  </div>
</template>
<script>
import create from "core/create";
import { detail } from "core/detail";
import { sendDic } from "core/dic";
import { DIC_PROPS, DIC_SPLIT } from 'global/variable'
import columnDynamic from "./column-dynamic";
import formTemp from '../../core/components/form/index'
export default create({
  name: "crud",
  data () {
    return {
      count: {}
  components: {
    formTemp,
    columnDynamic
  inject: ["crud"],
  provide () {
    return {
      crud: this.crud,
      dynamic: this
  props: {
    tableOption: {
      type: Object,
      default: () => {
        return {};
    columnOption: {
      type: Array,
      default: () => {
        return [];
  computed: {
    list () {
      let result = [...this.columnOption];
      return result;
  methods: {
    vaildLabel (column, row, val) {
      if (column.rules && row.$cellEdit) {
        return val
    vaildColumn (item) {
      return ((this.crud.$refs.dialogColumn || {}).columnIndex || []).includes(item.prop)
    corArray (list, separator = DIC_SPLIT) {
      if (this.validatenull(list)) {
        return []
      } else if (!Array.isArray(list)) {
        return list.split(separator);
      return list
    getImgList (row, column) {
      let url = (column.propsHttp || {}).home || ''
      let value = (column.props || {}).value || DIC_PROPS.value;
      if (this.validatenull(row[column.prop])) return []
      if (column.listType == 'picture-img') return [url + row[column.prop]]
      let list = this.corArray(this.deepClone(row[column.prop]), column.separator);
      list.forEach((ele, index) => {
        if (typeof ele === 'object') {
          list[index] = url + ele[value];
        } else {
          list[index] = url + ele;
      return list;
    handleDetail (row, column) {
      let result = row[column.prop];
      let DIC = column.parentProp ? (this.crud.cascaderDIC[row.$index] || {})[column.prop] : this.crud.DIC[column.prop]
      result = detail(row, column, this.tableOption, DIC);
      if (!this.validatenull(DIC)) {
        row["$" + column.prop] = result;
      return result;
    handleShowLabel (row, column, DIC) {
      let result = "";
      if (!this.validatenull(DIC)) {
        result = detail(row, column, this.tableOption, DIC);
        row["$" + column.prop] = result;
      return result;
    columnChange (index, row, column) {
      if (this.validatenull(this.count[column.prop])) this.count[column.prop] = 0
      this.count[column.prop] = this.count[column.prop] + 1;
      if (column.cascader) this.handleChange(index, row)
      if (this.count[column.prop] % 3 === 0 && typeof column.change === 'function' && column.cell === true) {
        column.change({ row, column, index: row.$index, value: row[column.prop] })
    handleChange (index, row) {
      this.$nextTick(() => {
        const columnOption = [...this.crud.propOption];
        //本节点;
        const column = columnOption[index];
        const list = column.cascader;
        const value = row[column.prop];
        const rowIndex = row.$index;
        // 下一个节点
        const columnNext = columnOption[index + 1];
        const columnNextProp = columnNext.prop;
        // 如果本节点没有字典则创建节点数组
        if (this.validatenull(this.crud.cascaderDIC[rowIndex])) {
          this.$set(this.crud.cascaderDIC, rowIndex, {});
        if (this.crud.formIndexList.includes(rowIndex)) {
          //清空子类字典
          list.forEach(ele => {
            this.$set(this.crud.cascaderDIC[rowIndex], ele.prop, []);
            list.forEach(ele => (row[ele] = ""));
          });
        //最后一级
        if (
          this.validatenull(list) ||
          this.validatenull(value) ||
          this.validatenull(columnNext)
          return;
        sendDic({
          column: columnNext,
          value: value,
          form: row
        }).then(
          res => {
            //首次加载的放入队列记录
            if (!this.crud.formIndexList.includes(rowIndex)) this.crud.formIndexList.push(rowIndex);
            const dic = Array.isArray(res) ? res : [];
            // 修改字典
            this.$set(this.crud.cascaderDIC[rowIndex], columnNextProp, dic);
            if (!this.validatenull(dic[columnNext.cascaderIndex]) && !this.validatenull(dic) && !this.validatenull(columnNext.cascaderIndex)) {
              row[columnNextProp] = dic[columnNext.cascaderIndex][(columnNext.props || {}).value || DIC_PROPS.value]
    openImg (list, index) {
      list = list.map(ele => {
        return { thumbUrl: ele, url: ele }
      this.$ImagePreview(list, index);
    //表格筛选逻辑
    handleFiltersMethod (value, row, column) {
      const columnNew = this.columnOption.filter(
        ele => ele.prop === column.property
      )[0];
      if (typeof columnNew.filtersMethod === "function") {
        return columnNew.filtersMethod(value, row, columnNew);
      } else {
        return row[columnNew.prop] === value;
    //表格筛选字典
    handleFilters (column) {
      if (column.filter !== true) return undefined;
      if (this.validatenull(column.dicFilters)) {
        let list = [];
        (this.crud.DIC[column.prop] || []).forEach(ele => {
          const props = column.props || this.tableOption.props || {};
          list.push({
            text: ele[props.label || DIC_PROPS.label],
            value: ele[props.value || DIC_PROPS.value]
          });
        });
        return list;
      return column.dicFilters;
});
</script>
 
2.tableOption中的配置，添加配置columnKey: ‘status’




    
 
export const tableOption = {
  menu: true,
  index: false,
  indexLabel: '序号',
  stripe: true,
  menuWidth: '100px',
  menuAlign: 'center',
  align: 'center',
  editBtn: false,
  delBtn: true,
  delBtnDisabled: false,
  addBtn: false,
  dic: [],
  searchMenuShow: false,
  selection: true,
  emptyText: '暂无数据',
  dialogType: 'drawer',
  labelPosition: 'top',
  column: [
      label: '状态',
      prop: 'status',
      width: 110,
      slot: true,
      filter: true,
      filterMultiple: false,
      columnKey: 'status',
      dicData: [{ label: '待训练', value: 20 }, { label: '已生效', value: 15 }, { label: '已禁用', value: 1 }, { label: '同步失败', value: 10 }, { label: '同步中', value: 5 }],
      filterMethod: function(value, row) {
        return row.status === value
 
3.avue-curd代码中，添加filter-change事件
 
<avue-crud
      ref="crud"
      :option="tableOption"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      @on-load="getList"
      @filter-change="filterChange"
 </avue-crud>
 
4.filterChange方法代码
 
methods: {
    filterChange(filters){
    //如果不配置columnKey,filters的key默认为column数字,无法判断是哪一列，配置了columnKey便能判断是哪一列的过滤条件，根据这个过滤条件便可以进行后端过滤操作
      if(filters && filters.status != undefined) {
        var array = filters.status;
        var status = '';
        array.forEach(element => {
          status += element + ','
        });
        if(status.indexOf(",")){
          status = status.substring(0,status.length-1)
        this.searchForm.searchStatus = status;
        this.getList(this.page)
                    1.问题说明1.准备在filter表头过滤时做后台查询过滤，但无法获取是哪一列2.avue-crud的filter-change事件中未封装column信息，这样在filter-change方法回调的时候，参数里只有默认的column信息，如果过滤的表头过多，无法判断是哪个列的过滤改变3.查看column.vue源码发现没有对el-table-colum加入column-key属性2.代码示例1.修改avue-crud源码中的column.vue,在el-table-column中加入属性:
1.在avue框架上添加@row-dblclick每一行的双击事件
2.在要编辑的option的column列添加change()事件，change事件中执行的是rowUpdate事件
<template>
  <basic-container>
    <avue-crud ref="crud"
               :data="data"
 <avue-crud
        :option="option"//表格配置属性，用于表格格式显示             
        :table-loading="loading"//表格等待框的控制，加载的时候转圈圈，设true/false
        :search.sync="search"  //搜索的变量(需要sync修饰符
import util from '@assets/js/util'
以上导入相应的模块，此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置：
resole:{
    extensions:['.js','.vue','.jso...
				
在使用vue时,对文本框、下拉等使用change事件，在change事件中打印日志，始终调用两次,此问题扰了我好久,时长都会想起这个问题,今天终于解决了!!!
<!-- 这是我使用报错的代码 -->
export default {
    data() {
		return {
        	option: {
        		column: [
                        label: '采购数量',
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式
和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：
<div id="app">
    <p>message 的值是：{{ message | capi }}</p>
  <script src="./lib/vue-2.6.12.js
				
Avue-CRUD 是一款基于 Vue.js 和 Element UI 的 CRUD 组件，可以帮助开发者快速构建数据管理页面。下面是一个简单的使用示例：
1. 安装 Avue-CRUD
```bash
npm install avue-crud --save
2. 在 Vue 组件中引入 Avue-CRUD
```javascript
import AvueCrud from 'avue-crud'
export default {
  components: {
    AvueCrud
  data() {
    return {
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '地址', prop: 'address' }
      data: [
        { id: 1, name: '张三', age: 18, address: '北京市' },
        { id: 2, name: '李四', age: 20, address: '上海市' },
        { id: 3, name: '王五', age: 22, address: '广州市' }
3. 在模板中使用 Avue-CRUD
```html
<template>
    <avue-crud
      :columns="columns"
      :data="data"
      :show-page="true"
      :show-search="true"
      :show-add="true"
      :show-edit="true"
      :show-delete="true"
      :show-export="true"
      :show-import="true"
</template>
以上代码会渲染一个包含数据列表、分页、搜索、添加、编辑、删除、导入、导出等功能的数据管理页面。你可以根据实际需求调整 Avue-CRUD 的配置参数来满足你的需求。