zollero/el-search-table-pagination

🐶 Combine Form, Table and Pagination components of Element UI together.

Hi there 👋     

Welcome to my Github Page. I'm Zollero, living in Hangzhou.

Hangzhou West Lake

el-search-table-pagination's Issues

希望能给form表单的重置按钮添加回调

重置了后table表不会更新，希望有个回调函数控制

能否支持模糊搜索呢- -

Usage of column type "expand"

Hello, I'm trying to guess how to use the column type "expand".

When I use it, I'm getting the arrow, and it is expanding an empty row, but I cannot set nothing into that expanded element.

Searching in the code I've seen this:

        ........
       v-if="column.type === undefined">
          <template slot-scope="scope" :scope="newSlotScope ? 'scope' : false">
            <span v-if="column.filter">
              {{ Vue.filter(column['filter'])(scope.row[column.prop]) }}
            </span>
            <span v-else-if="column.slotName">
              <slot :name="column.slotName" :row="scope.row" :$index="scope.$index" />
            </span>
            <span v-else-if="column.render">
              {{ column.render(scope.row) }}
            </span>
            <span v-else-if="column.formatter">
              {{ column.formatter(scope.row, scope.column, scope.row[column.prop], scope.$index) }}
            </span>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-bind="column" :key="columnIndex" v-else></el-table-column>

When the type is "expand" it uses the last line, so it seems that It's impossible to set the expanded row template inside of the el-table-column tag

Is there any way to use this functionality or it is not fully supported?

Thanks in advance.

column上的formatter有成功使用过的例子吗？

我在项目里面弄了很久，一直不起作用，刚刚用你的sample也测试了一下，也是不起作用：

https://codepen.io/anon/pen/yRVbKB

有没有能成功使用的代码示例吗？

如果要在table中的某一列显示图片，使用render吗

请教大神，请问下list和total异步返回要怎么写呀？

请教大神，请问下list和total异步返回，fetch要怎么写呀？

希望能支持国际化

columns: [ {type:"selection"}]

columns: [ {type:"selection"}] ，全选checkbox通过什么事件来获取数据，能给一个例子吗？

slot prepend append是el-table的插槽，不是el-search-table-pagination的插槽，要怎么使用呢？

如果只想使用表单应该怎样写呢？

如果只想使用表单，不想使用表格和分页，应该怎样写呢？

自定义操作列无法显示button

您好，我在使用时候在表格最右侧加了一列操作列，想要在每一行加一个编辑和删除按钮，但是列能出来button却不能显示，请问是什么问题？
以下是我的代码：

设置table为remote的模式时，form的search按钮会抖动

设置table为local模式时，search按钮是正常的。如果设置为remote模式，点击分页的按钮与search的按钮，search按钮会抖动一下。同时表格上面的一行会消失。

自己添加了按钮为什么查询不可以？下面是源码请大神解答

查询 查询

    <el-button @click="scope.search" :loading="scope.loading">
      查询
    </el-button>
  </el-form>
</template>

<script> export default { data() { return { // value1: '', searchParams: { date: '', type: '', number: '' }, formOptions: { inline: true, // submitBtnText: 'Search' forms: [ { prop: 'date', label: '日期查询:' }, { prop: 'type', label: '车型查询:' }, { prop: 'number', label: '车号查询:' } ] }, columns: [ { prop: 'id', label: '洗车ID', minWidth: 100}, { prop: 'type', label: '车型', minWidth: 100}, { prop: 'number', label: '车号', minWidth: 100}, { prop: 'date', label: '洗车日期', minWidth: 100}, { prop: 'startime', label: '开始时间', minWidth: 100}, { prop: 'endtime', label: '结束时间', minWidth: 100}, { prop: 'worktime', label: '作业时长', minWidth: 100}, { prop: 'clear', label: '清晰模式', minWidth: 100}, { prop: 'marshalling', label: '编组模式', minWidth: 100}, { prop: 'scrubbing', label: '洗涤液', minWidth: 100} ], tableData: [ { id: '12993', type: 'CRh380BI1', number: '1411', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12994', type: 'CRh380BI1', number: '1410', date: '2016-05-03', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12995', type: 'CRh380BI1', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12996', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12997', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12998', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '12999', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '129910', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '129911', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' }, { id: '129912', type: 'CRh380BI', number: '1410', date: '2016-05-02', startime: '12:50:32', endtime: '13:50:20', worktime: '55', clear: '自动无端洗', marshalling: '正常', scrubbing: '正常' } ] } } } </script> <style lang="scss" scoped> .block1{ position: relative; top: -10px; } </style>

0.4.28版本什么时候能发布呀?

Table column 属性

参数	说明	类型	可选值	默认值
prop	展示字段的字段值	string	-	-
label	列名	string	-	-
width	列宽	number	-	140
minWidth	最小列宽	number	-	-
filter	过滤器名（只有配置在全局的filter才有效）	string	-	-
render	处理数据的函数，接收行数据作为参数	function	-	-
slotName	使用 slot 标记的代码块的 slot 属性值	string	-	-
type	0.4.28后支持，Element UI Table支持的一个属性，借用这个属性来切换是否使用本组件column内的插槽内容，当本属性没有给值时，本组件保持和之前版本一样的兼容性，组件会接管column数组中的定义并定义Element UI Table Column，只有指定的属性才会给予，并且会实现组件中给予的render和formatter等功能。如果该属性一旦有给值时，column定义的所有属性都会传递给Element UI Table Column，本组件也不会对column内容进行处理，相应的处理能力也交给Element UI Table本身，通过这种方式，也可以支持Element UI Table中的多选列，Index列等，设置为default也即为Element UI Table的缺省模式，会从数据对象中读取prop属性，也会受到filter的过滤，只不过处理都是Element UI Table来进行了。	string	default/selection/index/expand

---

0.4.28版本什么时候能发布呀?

Col adjustment

I's possible to automatic columns width adjustment according to text length?

Console errors invalid key in validation rule

Got this errors,

I resolved the promise using the fetch.

resetBtnCallback回调执行重新查询时其他条件正常重置，但daterange不能重置

点击重置后回调函数重新刷新表格，发现其他formItem可以正常重置，但时间范围并没有重置，依然出现在请求参数中

elementUI-tabled的高级功能支持

貌似只有基础表格的例子，如果想实现高级表格呢，比如有排序功能的表格、统计的表格，是否也能支持配置。

Language change

Hello,

How can I change the pagination language to English?

Thanks

如果想触发 el-table 原生的函数该怎么办呢？

例如，toggleRowExpansion() 等该怎样触发？

pagination events

It seems not support pagination events

希望提供一个demo

希望提供一个demo

获取数据直接传入url的方式使用起来不灵活,可以考虑新增传入function的方式

可以实现模糊查询吗？

表单可以实现模糊查询吗？

`current-change` event is duplicated on <el-table> and <el-pagination>

current-change event namespace is duplicated on <el-table> and <el-pagination>.
so, we have to compare whether the type of the first argument of event is an object or a number.

Can you fix the event name or have another solutions?

http://element.eleme.io/#/en-US/component/table#table-events
http://element.eleme.io/#/en-US/component/pagination#events

Event Name	Element	Description	Parameters
current-change	<el-table>	triggers when current row changes	currentRow, oldCurrentRow
current-change	<el-pagination>	triggers when current-page changes	the new current-page

Use Filter Daterange

Hi, would you have any examples to use the filter with daterange, or the use filter-method?

Thanks

header-row-class-name 不支持这个属性吗

Remote data如何进行前端分页

在设置了type=“remote”和url之后，分页就变成了GET /data/fetch?pageIndex=2&pageSize=10这种请求后端分页的样子，如果此时想进行前端分页该如何处理？

非常感谢！！

现在组件不支持多表头吧？

现在组件不支持多表头吧？

关于使用后的一些建议

1. 希望可以传递一个对象给内部的 table pagination 这些

2. 关于宽度，现在默认会设为 140 ，请问出于什么考虑？
   因为个人遇到的场景， table 都要求占满父容器的宽度，对个别列设置最小宽度。不占满父容器的 table 都很丑。。

column prop名称包含子属性的时候取不到值

比如prop: a.b，这样的时候，无法展示

render函数return的内容怎么让换行显示

render: row => {
const { startTime } = row
const { endTime } = row
return startTime +''+ endTime
}}, 想要在后换行怎么写？

怎么在查询form中添加自己的按钮

怎么在查询form中添加自己的按钮 比如我表格中需要新增数据 需要一个添加按钮 来弹出新增框 该怎么实现

_vm.Vue.filter(...) is not a function?

报这个错啥原因啊？

Possibility argument issue for function searchHandler

el-search-table-pagination/packages/search-table-pagination/src/main.vue

Line 185 in 9640d71

this.dataChangeHandler(arguments[0])

Please check the line above, I think we might have issue with this function. Since dataChangeHandler method is expecting query parameters. But if seachHandler was called by parameter resetPageIndex, arguments[0]' will be the value for resetPageIndex. Therefore, dataChangeHandler` method call never can get the query parameters.

Simply said, that's no way to call searchHandler with both resetPageIndex set to false and query parameter object pass in

报错：javascript miss dev ，如何解决

操作列对表中数据做修改后，怎么及时反映出来呢？

例如，我对表格中某一行数据进行修改或者删除，异步操作后，表中数据还是之前的，怎么才能直接操作到封装表格中的的数据呢？

@filter-change method

working on filtering, when I receive the property its a bit rare the way to parse it.
reason to say so, you send back an object of type {filterName: filterValue}

When I receive the property I have to do something like:

filtersHandle(itemObject) {
      for (let [k, v] of Object.entries(itemObject)) {
        this.$refs.crudTable.params[k] = v;
        this.$refs.crudTable.dataChangeHandler();
      }
    },

This is something could work better if we get something like:

filtersHandle(key, value) {
     
    },

I mean, will be a bit cleaner and we can work an easy approach by simply if key === 'myFilter
Or maybe you can suggest a better approach Im not aware of.

Thanks again for this great package, makes life easier.

How to do an ajax remote sort

Hello,

I have captured the 'sort-change' event and setted the sortable prop to 'custom'.

But I don't know how to call the "searchHandler" method outside of the component to force a reloading.

this is an example of my code.

<template>
  <el-search-table-pagination
                url="/my/search/url"
                list-field="data"
                total-field="total"
                stripe
                border
                :columns="columns"
                page-index-key="page"
                page-size-key="offset"
                @sort-change="onSortChanged"
        >

  ... here goes some slots

</el-search-table-pagination>
</template>
<script>
export default {
    data() {
        return {
            showDialog: false,
            columns: [
                { prop: 'name', label: 'Name', minWidth: 200, sortable: 'custom' },
                { prop: 'start_date', label: 'Start Date',width: 140, sortable: 'custom' },
                { prop: 'end_date', label: 'End Date', width: 140, sortable: 'custom' },
                { label: 'Actions', width: 90, slotName: 'buttons' }
            ]
        }
    },
 methods: {
 onSortChanged(data) {
          /// What I have to do here?
        },
 .... more code

Thanks in advance.

看源码el-table和el-table-column属性和事件绑定太麻烦了，有简单方式

所有属性和事件一次性绑定

单个组件绑定时
<el-table
          v-bind="$attrs"
          v-on="$listeners">
</el-table>

多个组件绑定时
<el-table
          v-bind="tableProps">
        <el-table-column
               v-bind="tableColumnProps"/>
</el-table>

希望form中的select改变时能添加传递change事件

因为有时需要多级联动的选择框，而与此对应的，想知道如何能直接获取form中被输入改变的各个prop值，希望看到能回复我下，谢谢

Persist pagination pageSize

Hi there,

I keep using this library, so goooooood, 👯

Can you help with this simple question:

How could I persist the pageSize after user has selected?

I work on remote data, page sizes could be dynamic, but the preselected value does not persist when im back to the table.

I know it can be done with:

this.$refs.crudTable.pagination.pageSize = this.state.pageSize;

but I can only setup this key once I have :auto-load = true.
and because of this I have to recall the query to apply my new pageSize.

Any work around im not aware of?

Thanks.

验证

请问查询时的条件验证要怎么验证呢

el-search-table-pagination selection 多选功能怎么做数据双向绑定？

el-search-table-pagination selection 多选功能，怎么做数据双向绑定？

多级联动的选择框取值和传参

多级联动的选择框，如机构和部门，机构选定后作为入参传给部门，load部门的下拉框内容。
两者都是remoteData，用的selectFetch。怎样动态获取一下拉框的取值并且作为入参传递给另一个下拉框？

input 类型的搜索 From 改成复合型输入框

想把 form 的输入框加个前置的 select 来针对表中具体字段进行远程模糊搜索，该怎么实现比较好呢？前段时间试了一下，会出现 select 与 input 数据不同的问题。

分页请求的时候怎么获取记录总数？

比如后台记录总数是100条，前端定义每页显示10条，请求被封装成'GET /data/fetch?pageIndex=2&pageSize=10'，后端响应只包含了第11条到第20条记录，此时total值怎么得到？

自定义列使用slotName属性时，出现重复

我想自定义列，可能是我使用不对么？

new Vue({
  el: '#app',
  data: {
    formOptions: {
      inline: true,
      submitBtnText: 'Search',
      forms: [
        { prop: 'name', label: 'Name' },
        { prop: 'mobile', label: 'Mobile' },
        { prop: 'sex', label: 'Sex', itemType: 'select',
         options: [
           { value: '', label: 'All' },
           { value: 0, label: 'Male' },
           { value: 1, label: 'Female' }
         ]
        }
      ]
    },
    columns: [
      { prop: 'name', label: 'Name', width: 140, slotName: 'test' },
      { prop: 'mobile', label: 'Mobile', minWidth: 180 },
      { prop: 'sex', label: 'Sex', width: 100,
       render: row => {
         const { sex } = row
         return sex === 0 ? 'Male' : sex === 1 ? 'Female' : 'Unknow'
       }
      }
    ],
    tableData: [
      { name: 'Sam', mobile: '15299xxxx', sex: 0 },
      { name: 'Jean', mobile: '13452xxxx', sex: 1 },
      { name: 'Tony', mobile: '187233xxxx', sex: 0 }
    ]
  },
  template:`
    <el-search-table-pagination
      type="local"
      :data="tableData"
      :page-sizes="[5, 10]"
      :columns="columns"
      :form-options="formOptions">

      <el-table-column label="Operate" slot="test" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini">Edit</el-button>
          <el-button
            size="mini"
            type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-search-table-pagination>
  `
})

每列内容支持嵌套html格式么？好像只支持字符串

prop: "id",
label: "id",
render: row => row.id + "_" + row.name # 这里能不能嵌套html格式？

封装表单是否支持自定义template？

例如是否支持这种复合型输入框