Table 组件

lx-table是 ElementUI的 el-table的二次封装，所以可以像el-table一样配置。

示例

基本使用

我是表格

<template>
  <lx-table
      :columns="columns"
      :data="tableData"
      :pagination="{
        current: 1,
        pageSize: 10,
        total: 100
      }"
      @current-change="currentChange"
  ></lx-table>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        { label: '姓名', filed: 'name' },
        { label: '年龄', filed: 'age' },
        { label: '性别',
          filed: 'sex',
          type: 'enum',
          options: [{ label: '男', value: 1 }, { label: '女', value: 0 }],
          optionColors:['#409EFF', '#F56C6C']
        }
      ],
      tableData: [
        { name: '海贼王', age: 15, sex: 1 },
        { name: '柯南', age: 9, sex: 1 },
        { name: '美少女战士', age: 17, sex: 0 },
      ]
    }
  },
  methods: {
    currentChange (page) {
      console.log('当前页', page)
    }
  }
}
</script>

Expand Copy Copy

自定义header和自定义单元格

我是表格

<template>
  <lx-table
      :columns="columns"
      :data="tableData"
      :pagination="{
        current: 1,
        pageSize: 10,
        total: 100
      }"
      @current-change="currentChange"
  ></lx-table>
</template>
<script>
export default {
  data () {
    return {
      headerValue: '1',
      columns: [
        {
          headerRender: (h, scope) => {
            return (
                <el-select value={this.headerValue} onChange={(val) => this.headerValue = val}>
                  <el-option value="1" label="选择1"></el-option>
                  <el-option value="2" label="选择2"></el-option>
                </el-select>
            )
          },
          render: (h, scope) => {
            return '自定义的内容'
          }
        },
        { label: '姓名', filed: 'name' },
        { label: '年龄', filed: 'age' },
        { label: '性别',
          filed: 'sex',
          type: 'enum',
          options: [{ label: '男', value: 1 }, { label: '女', value: 0 }],
          optionColors:['#409EFF', '#F56C6C']
        }
      ],
      tableData: [
        { name: '海贼王', age: 15, sex: 1 },
        { name: '柯南', age: 9, sex: 1 },
        { name: '美少女战士', age: 17, sex: 0 },
      ]
    }
  },
  methods: {
    currentChange (page) {
      console.log('当前页', page)
    }
  }
}
</script>

Expand Copy Copy

带图片

我是表格

<template>
  <lx-table :columns="columns" :data="tableData"></lx-table>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        { label: '姓名', filed: 'name' },
        { label: '年龄', filed: 'age' },
        { label: '性别',
          filed: 'sex',
          type: 'enum',
          options: [{ label: '男', value: 1 }, { label: '女', value: 0 }],
          optionColors:['#409EFF', '#F56C6C']
        },
        { label: '头像', filed: 'userImg', type: 'image' }
      ],
      tableData: [
        { name: '海贼王', age: 15, sex: 1, userImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F01%2F20160101173952_LSPnC.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669811479&t=3b462e44f97bea3ed93adafc8c967bb0' },
        { name: '柯南', age: 9, sex: 1, userImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669811409&t=18d620ba194b8b00a8289b91ecea6ac7' },
        { name: '美少女战士', age: 17, sex: 0, userImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202102%2F28%2F20210228085905_de8f7.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669811611&t=fce4c1a44386c1d6f99639a6bb15d1b6' },
      ]
    }
  }
}
</script>

Expand Copy Copy

带复选框

多选

[]

我是表格

<template>
  <div>
    <div>{{tableSelected}}</div>
    <lx-table
        ref="checkboxTable"
        :columns="columns"
        :data="tableData"
        primary-key="id"
        :multiple="true"
        :selected="tableSelected"
        :table-attr="tableAttr"
        @select-change="selectChange"
    ></lx-table>
    <div>
      <el-button @click="setCheckbox(true)">全选</el-button>
      <el-button @click="setCheckbox(false)">取消全选</el-button>
    </div>
  </div>

</template>
<script>

export default {
  data () {
    return {
      columns: [
        { selection: true, width: '80px', align: 'center' },
        { label: 'ID', filed: 'id' },
        { label: '姓名', filed: 'name' },
        { label: '年龄', filed: 'age' },
        { label: '性别',
          filed: 'sex',
          type: 'enum',
          options: [{ label: '男', value: 1 }, { label: '女', value: 0 }],
          optionColors:['#409EFF', '#F56C6C']
        }
      ],
      tableAttr: {},
      tableData: [
        { id: '1', name: '海贼王', age: 15, sex: 1 },
        { id: '12', name: '柯南', age: 9, sex: 1 },
        { id: '13', name: '美少女战士', age: 17, sex: 0 },
      ],
      tableSelected: [],
      selectAll: true
    }
  },
  methods: {
    selectChange (selected) {
      console.log('已勾选', selected)
      this.tableSelected = selected.map(item => item.id)
    },
    setCheckbox (status) {
      this.$refs.checkboxTable.setAllCheckbox(status)
    }
  }
}
</script>

Expand Copy Copy

单选

选择数据：[ "1" ]

我是表格

<template>
  <div>
    <div>
      选择数据：{{tableSelected}}
    </div>
    <lx-table
        ref="checkboxTable"
        :columns="columns"
        :data="tableData"
        primary-key="id"
        :multiple="false"
        :selected="tableSelected"
        :table-attr="tableAttr"
        @select-change="selectChange"
    ></lx-table>
  </div>

</template>
<script>

export default {
  data () {
    return {
      columns: [
        { selection: true, width: '80px', align: 'center' },
        { label: 'ID', filed: 'id' },
        { label: '姓名', filed: 'name' },
        { label: '年龄', filed: 'age' },
        { label: '性别',
          filed: 'sex',
          type: 'enum',
          options: [{ label: '男', value: 1 }, { label: '女', value: 0 }],
          optionColors:['#409EFF', '#F56C6C']
        }
      ],
      tableAttr: {},
      tableData: [
        { id: '1', name: '海贼王', age: 15, sex: 1 },
        { id: '12', name: '柯南', age: 9, sex: 1 },
        { id: '13', name: '美少女战士', age: 17, sex: 0 },
      ],
      tableSelected: ['1'],
      selectAll: true
    }
  },
  methods: {
    selectChange (selected) {
      console.log('已勾选', selected)
      this.tableSelected = selected.map(item => item.id)
    }
  }
}
</script>

Expand Copy Copy

Table Attributes

参数	是否必填	说明	类型	可选值	默认值
data	否	显示的数据	Array	-	-
columns	是	表格的配置（下面会有详细介绍）	Array	-	-
table-attr	否	el-table的attr（具体参考elementUI的官方文档）	Object	-	-
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	-	-

Table Event

处理单元格的数据显示

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

Table Methods

处理单元格的数据显示

方法名	说明	参数
setAllCheckbox	传入一个Boolean值，可以切换全选和取消所有选择	true/false

Columns

columns 是一个object array，object是列的配置。

[
  {
    hidden: true, // true 隐藏表头 / false 不隐藏
    label: '标题', // 表头
    filed: 'title', // 需要显示data中对应的字段数据
    filedPrimaryKey: 'url', // 当type === image，并且 filed的值是一个对象数组的时候，该项会从对象中取响应的字段的值
    props: { // el-table的attrs，具体参考ElementUI官方文档
      sortable: true
    },
    componentProps: { // 组件的props，例如type=image的时候
      props: { ... },
      style: { ... },
      class: { ... },
      on: { ... }
    },
    type: 'enum', // 枚举数据， 如果不设置，则仅显示filed配置的字段数据，该配置可以处理一些简单的数据类型
    options: [ // 当 type = enum 之类的类型时，会使用 options 的数据，value对应filed字段的值
      { label: '开启', value: 1 },
      { label: '关闭', value: 0 }
    ],
    optionColors: ['#67C23A', '#F56C6C'], // 按 index 顺序匹配 options 显示文字颜色
    width: '200px', // 单元格的宽度
    align: 'center', // 内容定位
    format: 'YYYY-MM-DD HH:mm:ss', // 当type = date / date-time的时候，使用该format格式
    headerRender: (h, scope) => { // 自定义头部
      return '自定义头部'
    },
    render (h, e) { // 自定义单元格内容，优先级为最高
      return h('div', e.row['filed'])
    }
  },
  {
    selection: true, // 该列开启 checkobox 选择
    filed: 'id' // 主键
  },
    // 表头嵌套
  {
    label: '地址',
    children: [
      { label: '区域', filed: 'area' },
      { label: '街道', filed: 'street' },
      { label: '详细地址', filed: 'address' },
    ]
  }
]

Type

处理单元格的数据显示

参数	说明	特殊
enum	枚举，需要配置columns的options项，options配置的value值对应filed项的字段
date	日期，把毫秒或者时间格式的值显示成 YYYY-MM-DD 的格式	自定义 columns[{ format: 'xxxx' }]
date-time	日期，把毫秒或者时间格式的值显示成 YYYY-MM-DD HH:mm:ss 的格式	自定义 columns[{ format: 'xxxx' }]
date-time-range	日期时间范围，数据：Array[Date, Date]	自定义 columns[{ format: 'xxxx' }]
time-range	时间范围，数据：Array[Date, Date]	自定义 columns[{ format: 'xxxx' }]
image	图片	filed的值：单个url，url数组，或者是一个对象数组，对象数组需要配置“filedPrimaryKey”
thousands	千分位
percentage	百分比，数值乘以100后显示，自动添加“%”
perMill	千分，数值乘以1000后显示，自动添加“‰”

searchConfig 查询config里的某个配置

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

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

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

WARNING

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