Javascript 过滤vuetable时操作列按钮未更改

我有一个vuestic数据表，有7列

前6列是来自数据库中存储的表的表字段

最后一列是vuetable操作列，它是“详细信息”和“删除”两个按钮的组合

根据数据库中来自表的数据，某些行有删除按钮，而其他行没有

此外，我还在vuetable的前6列上使用排序。但我的问题是，当我用一列对vuetable进行排序时，例如“Lines Read”，所有其他列也会进行排序，但action列（最后一列）根本不会更改，并以相同的顺序显示按钮

我希望按钮也随着行数据在排序时的更改而更改。我该怎么做

TransactionImports.vue

从“Vue”导入Vue
从“时刻”导入时刻
从“../comps/FilterBar”导入FilterBar
从“epic微调器”导入{SpringSpinner}
从“/ActionColumn”导入ActionColumn
从“../../services/api”导入{getAllTransactionImports}
Vue.组件（'action-column'，ActionColumn）
导出默认值{
名称：“事务导入”，
组成部分：{
过滤器，
弹簧纺纱机
},
道具：{
可过滤字段：{
类型：数组，
默认值：（）=>[
“收藏”，
“linesRead”，
“outputFilename”，
“全部插入”
//“帐号”
]
}
},
数据（）{
返回{
加载：false，
搜索文本：“”，
进口：[]，
表格字段：[
{
名称：“importedOn”，
标题：'导入日期'，
sortField:“importedOn”，
宽度：“10%”，
回调：this.formatDate
},
{
名称：'集合'，
标题:"收藏",，
索特菲尔德：“收藏”，
宽度：“20%”
},
{
名称：'linesRead'，
标题：“行已读”，
sortField:“linesRead”，
宽度：“10%”
},
{
名称：“totalInserts”，
标题：“全部插入”，
sortField:“totalInserts”，
宽度：“10%”
},
{
名称：'rowsParsed'，
标题：“已分析的行”，
sortField:“rowsParsed”，
宽度：“10%”
},
{ 
名称：“outputFilename”，
标题：“输出”，
sortField:'outputFilename'，
宽度：“25%”
},
{
名称：'\u组件：操作列'，
标题：“”，
宽度：“15%”
}
],
默认每页：30，
查询参数：{
排序：“排序”，
第页：'第页'，
每页：'每页'
},
分页路径：“”，
排序功能：{
“achIncrements”：this.sortFunc，
“集合”：this.sortFunc，
“importedOn”：this.sortFunc，
“linesRead”：this.sortFunc，
“outputFilename”：this.sortFunc，
“rowsParsed”：this.sortFunc，
“totalInserts”：this.sortFunc，
}
}
},
创建（）{
这个文件名为loadTransImport（）
},
计算：{
表格数据：{
得到（）{
const txt=new RegExp（this.searchText'i'）
let list=this.imports.slice（）
列表=列表.过滤器（项=>{
返回此.filterablefields.some（字段=>{
常量值=项[字段]+“”
返回val.search（txt）>=0
})
})
list={data:list}
返回列表
},
集合（）{}
},
},
方法：{
loadTransImport（）{
让self=这个
自加载=真
getAllTransactionImports（）。然后（res=>{
self.$log.debug（res.data）
self.imports=res.data.sort（（item1，item2）=>item1.importedOn>=item2.importedOn？-1:1）
self.tableData=self.imports
Vue.nextTick（（）=>self.$refs.vuestictable.$refs.vuetable.refresh（））
自加载=错误
}).catch（e=>{
self.$log.error（e）
自加载=错误
})
},
//列表筛选和分页
onFilterSet（）{
const txt=new RegExp（this.searchText'i'）
this.tableData=this.imports.slice（）
this.tableData=this.imports.filter（项=>{
返回此.filterablefields.some（字段=>{
常量值=项[字段]+“”
console.log（val.search（txt）>=0）
返回val.search（txt）>=0
})
})
Vue.nextTick（（）=>this.$refs.vuestictable.$refs.vuetable.refresh（））
},
sortFunc（项目1、项目2）{
返回项1>=项2？1:-1
},
格式化日期（值）{
返回时刻（值）。格式（'MM/DD/YYYY HH:MM'）
}
}
}

ActionColumn.vue

细节
删除导入
这件事无法挽回

从“../../services/api”导入{deleteTransactionImport}
导出默认值{
名称：“操作列”，
道具：{
行数据：{
类型：对象，
必填项：true
},
行索引：{
类型：编号
}
},
创建（）{
这个文件名为loadProfile（）
},
方法：{
加载配置文件（）{
console.log（this.rowData）
this.locked=this.rowData.isLocked
this.profile=this.$store.getters.getProfile
},
进口详情（）{
this.$router.push（{name:'transaction list'，params:{importDate:this.rowData.importedOn}）
},
openDeleteModal（）{
这是。$refs.deleteModal.open（）
},
删除导入（）{
//太危险了，不敢尝试
让importID=this.rowData.collection
deleteTransactionImport（导入）。然后（res=>{
此.$log.info（'已删除'）
})
}
}
}
/*.圆圈{
宽度：.75rem；
高度：.75雷姆；
边界半径：50%；
显示：内联块
} */

这是桌面截图

---

免责声明：我不知道v

<template>
  <div class="va-row">
    <div class="flex md12 xs12">
      <vuestic-widget headerText="Transaction Imports">
        <div style="float: right; margin-right: 20px;">
          <filter-bar
            @input="onFilterSet"
            label="Search"
            v-model="searchText"
          />
        </div>
        <div v-show="loading" class="data-table-loading">
          <slot name="loading">
            <spring-spinner
              slot="loading"
              :animation-duration="2500"
              :size="70"
              color="#007755"
            />
          </slot>
        </div>
        <vuestic-data-table
          ref="vuestictable"
          v-show="!loading"
          :apiMode="false"
          :tableData="tableData"
          :tableFields="tableFields"
          :defaultPerPage="defaultPerPage"
          :sortFunctions="sortFunctions"
          :paginationPath="paginationPath"
          :queryParams="queryParams"
        />
      </vuestic-widget>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import FilterBar from '../comps/FilterBar'
import { SpringSpinner } from 'epic-spinners'
import ActionColumn from './ActionColumn'
import { getAllTransactionImports } from '../../services/api'

Vue.component('action-column', ActionColumn)
export default {
  name: 'transaction-imports',
  components: {
    FilterBar,
    SpringSpinner
  },
  props: {
    filterablefields: {
      type: Array,
      default: () => [
        'collection',
        'linesRead',
        'outputFilename',
        'totalInserts'
        // 'accountNumbers'
      ]
    }
  },
  data () {
    return {
      loading: false,
      searchText: '',
      imports: [],
      tableFields: [
        {
          name: 'importedOn',
          title: 'Imported On',
          sortField: 'importedOn',
          width: '10%',
          callback: this.formatDate
        },
        {
          name: 'collection',
          title: 'Collection',
          sortField: 'collection',
          width: '20%'
        },
        {
          name: 'linesRead',
          title: 'Lines Read',
          sortField: 'linesRead',
          width: '10%'
        },
        {
          name: 'totalInserts',
          title: 'Total Inserts',
          sortField: 'totalInserts',
          width: '10%'
        },
        {
          name: 'rowsParsed',
          title: 'Rows Parsed',
          sortField: 'rowsParsed',
          width: '10%'
        },
        { 
          name: 'outputFilename',
          title: 'Output',
          sortField: 'outputFilename',
          width: '25%'
        },
        {
          name: '__component:action-column',
          title: '',
          width: '15%'
        }
      ],
      defaultPerPage: 30,
      queryParams: {
        sort: 'sort',
        page: 'page',
        perPage: 'per_page'
      },
      paginationPath: '',
      sortFunctions: {
        'achIncrements': this.sortFunc,
        'collection': this.sortFunc,
        'importedOn': this.sortFunc,
        'linesRead': this.sortFunc,
        'outputFilename': this.sortFunc,
        'rowsParsed': this.sortFunc,
        'totalInserts': this.sortFunc,
      }
    }
  },
  created() {
    this.loadTransImport()
  },
  computed: {
    tableData: {
      get () {
        const txt = new RegExp(this.searchText, 'i')
          let list = this.imports.slice()
          list = list.filter(item => {
            return this.filterablefields.some(field => {
              const val = item[field] + ''
              return val.search(txt) >= 0
            })
          })
          list = {data: list}
          return list
      },
      set () {}
    },
  },
  methods: {
    loadTransImport () {
      let self = this
      self.loading = true
      getAllTransactionImports().then(res => {
        self.$log.debug(res.data)
        self.imports = res.data.sort((item1, item2) => item1.importedOn >= item2.importedOn ? -1 : 1)
        self.tableData = self.imports
        Vue.nextTick(() => self.$refs.vuestictable.$refs.vuetable.refresh())
        self.loading = false
      }).catch(e => {
        self.$log.error(e)
        self.loading = false
      })
    },
    // list filter and pagination
    onFilterSet () {
      const txt = new RegExp(this.searchText, 'i')
      this.tableData = this.imports.slice()
      this.tableData = this.imports.filter(item => {
        return this.filterablefields.some(field => {
          const val = item[field] + ''
          console.log(val.search(txt) >= 0)
          return val.search(txt) >= 0
        })
      })
      Vue.nextTick(() => this.$refs.vuestictable.$refs.vuetable.refresh())
    },
    sortFunc (item1, item2) {
      return item1 >= item2 ? 1 : -1
    },
    formatDate (value) {
      return moment(value).format('MM/DD/YYYY HH:mm')
    }
  }
}
</script>

<template>
  <div style="height: 100%">
    <button 
      class="btn btn-primary btn-micro"
      @click="importDetails"
    >
      Details
    </button>
    <span v-if="profile.role === 'clerk'" style="margin-left:80px;"></span>
    <button v-if="locked && profile.role === 'admin' || profile.role === 'manager'"
        class="btn btn-danger btn-micro"
        @click="openDeleteModal"
      >
        <span class="fa fa-trash-o"></span>
    </button>
    <vuestic-modal
      ref="deleteModal"
      okText="Delete"
      okClass="btn btn-danger btn-micro"
      cancelClass="btn btn-pale btn-micro"
      @ok="deleteImport"
    >
      <p slot="title">Delete the Import</p>
      <p>This can't be undone</p>
    </vuestic-modal>
  </div>
</template>

<script>
import { deleteTransactionImport } from '../../services/api'

export default {
  name: 'action-column',
  props: {
    rowData: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    loadProfile () {
      console.log(this.rowData)
      this.locked = this.rowData.isLocked
      this.profile = this.$store.getters.getProfile
    },
    importDetails () {
      this.$router.push({name: 'transaction-list', params: {importDate: this.rowData.importedOn}})
    },
    openDeleteModal () {
      this.$refs.deleteModal.open()
    },
    deleteImport () {
      // too dangerous to try
      let importID = this.rowData.collection
      deleteTransactionImport(importID).then(res => {
        this.$log.info('deleted')
      })
    }
  }
}
</script>

<style scoped>
/* .circle {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  display: inline-block
} */
</style>