Lx-UI

# Filter-table

# NPM安装

npm install @lxing-ui/lx-filter-table
1

# 引用

import LxFilterTable from '@lxing-ui/lx-filter-table'
import '@lxing-ui/lx-filter-table/lib/esm/css/index.css'

// Vue.use
Vue.use(LxFilterTable)

// component
export default {
    components: {
        LxFilterTable
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

# CDN

使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- css文件 -->
    <link rel="stylesheet" href="https://unpkg.com/lxing-ui/lib/umd/lxing-ui.umd.css">
    <link rel="stylesheet" href="https://unpkg.com/@lxing-ui/lx-filter-table/lib/umd/css/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <div>
        <el-button>按钮</el-button>
        <lx-filter-table :config="tableColumns" :data="tableData" @submit="submit"></lx-filter-table>
    </div>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 压缩版 -->
<script src="https://unpkg.com/lxing-ui/lib/umd/lxing-ui.umd.min.js"></script>
<script src="https://unpkg.com/@lxing-ui/lx-filter-table/lib/umd/lx-filter-table.umd.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data () {
      return {
        name: '小白123',
        tableData: [
          { id: 'A123', status: 1, time: Date.now() },
          {id: 'A111', status: 0, time: Date.now()}
        ],
        tableColumns: [
          {label: 'ID', filed: 'id', type: 'input', isFilter: true},
          {label: '时间', filed: 'time', type: 'date-time', isFilter: true},
          {
            label: '状态',
            filed: 'status',
            type: 'enum',
            isFilter: true,
            options: [
              {label: '已完成', value: 1},
              {label: '未完成', value: 0}
            ]
          },
          {
            render: (h, record) => {
              const text = 'hello'
              return h('div', null, text)
            }
          }
        ]
      }
    },
    methods: {
      submit (form) {
        console.log('提交', form)
      }
    }
  })
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# 介绍

lx-filter-table 是form和table的两个组件的结合，使用同一个config配置，需要成为filter条件的配置项，设置isFilter: true即可。

# 示例

# 基本使用

我是表格 
<template>
  <div>
    <lx-filter-table
        :config="config"
        :data="tableData"
        :pagination="{
          current: 1,
          pageSize: 10,
          total: 100
        }"
        primary-key="name"
        @submit="onsubmit"
        @reset="onReset"
    >
    </lx-filter-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
        total: 100
      },
      config: [
        {
          selection: true,
        },
        {
          label: '名称',
          filed: 'name',
          type: 'input',
          isFilter: true
        },
        {
          label: '年龄',
          filed: 'age',
          type: 'input',
          isFilter: true
        },
        {
          label: '性别',
          filed: 'sex',
          type: 'enum',
          isFilter: true,
          options: [
            { label: '男', value: '1'  },
            { label: '女', value: '0'  }
          ]
        },
        {
          label: '创建时间',
          filed: 'date',
          type: 'date-time',
          isFilter: true
        },
        {
          label: '开始结束日期',
          filed: 'activeTime',
          type: 'date-range',
          isFilter: true
        },
        {
          label: '活动时间',
          filed: 'activeTime',
          type: 'date-time-range',
          isFilter: false
        },
        {
          label: '每日活动时间',
          filed: 'timeRange',
          type: 'time-range',
          isFilter: false
        },
        {
          label: '备注',
          filed: 'remark',
          isFilter: true
        }
      ],
      tableData: [
        {
          remark: '备注信息',
          name: '小白',
          age: 12,
          sex: '1',
          date: '2023-3-1',
          activeTime: ['2023-2-1', '2023-3-1'],
          timeRange: ['14:18:20', '16:00:00']
        },
        {
          remark: '备注信息',
          name: '萨达',
          age: 11,
          sex: '0',
          date: '2023-3-1',
          activeTime: ['2023-2-1', '2023-3-1'],
          timeRange: ['14:18:20', '16:00:00']
        }
      ]
    }
  },
  methods: {
    onsubmit (form) {
      console.log('onsubmit', form)
    },
    onReset (form) {
      console.log('onReset', form)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
Expand Copy

# Attributes

参数 是否必填 说明 类型 可选值 默认值
data 是 表格的数据 Array - -
config 是 form和table的配置 Array - -
form-attr 否 el-form的配置，具体配置请阅读：Element-ui -> Form Object - -
table-attr 否 el-table的配置，具体配置请阅读：Element-ui -> Table Object - -
size 否 所有form里的控件的尺寸 String medium / small / mini -
default-btn-show 否 是否显示默认按钮（提交、重置） Boolean - true
table-loading 否 加载动画 Boolean true / false false
pagination 否 分页，配置相应配置（具体参考elementUI的官方文档） Boolean/Object false/ Object false
pagination-align 否 分页的位置 String right / left right
primary-key 否 配置selection后有效，的主键字段名称，selection的用法在columns介绍中 String - -
selected 否 配置selection后有效，selection的已选值，是一个字符串数组 Array - -

# Event

处理单元格的数据显示

事件名 说明 参数
select-change selection配置后，监听checkbox的变化 selection
current-change 切换分页后触发 page
prev-click 上一页 page
next-click 下一页 page
size-change 分页最大显示数变化后触发 pageSizes

# Methods

事件名称 说明 参数 返回值
getForm 获取formData数据，获取form组件的实例 - { data, formEle }
setFormData 设置form表单的数据 object
searchConfig 获取配置项 - -

# Slot

事件名称 说明 参数 返回值
interlayer 在form和table中间插入内容 - -

# slot例子

<template>
  <lx-filter-table>
    <template #interlayer>
      <el-button type="primary">新建</el-button>
    </template>
  </lx-filter-table>
</template>
1
2
3
4
5
6
7
8

# searchConfig 查询config里的某个配置

查询config的配置，可以用于修改我们想要修改配置的属性值，例如disabled = true，改为 false

可以通过 ref 的方式调用组件内部的 searchConfig 函数 searchConfig({ key: 'filed', value: 'name' })

就可以找到 属性名：filed，值：name 的这一项配置，直接修改想要修改的属性即可

WARNING

注意：
table在加载之后由于columns已经固定，当设置一个type=enum的column后，想要通过异步配置options是无法更新视图的，所以这种情况下 最好使用render函数来处理该column

# Config

filter-table由于form和table有些属性的名称重合，所以需要做区分 其他的具体属性的请查看 lxForm 和 lxTable 的配置

属性 说明 数据类型 参数 返回值 默认值
render table的自定义，不作用于form function (h, record)
formRender form的自定义 function (h, record)
notTable 是否显示在表格，默认显示，true显示，false不显示 Boolean true/false undefined
isFilter 是否表单项，默认不是，true是，false不是 Boolean true/false undefined

← admin布局 →