kh-device-admin/jero-web/src/components/jero/README_JTable.md

JTable 支持列自定义及可拖拽列宽的表格

JTable参数配置

参数	类型	必填	说明
tableKey	String	✔	全局JTable唯一，持久化存储自定义列配置
columns	Array	✔	需要配合.sync获取最新的数据，具体项见下表
settingStyle	Object		自定义列配置表的样式
settingScroll	Object		自定义列配置表的滚动配置
scroll	Object		表格滚动配置，建议使用拖拽属性resizable时设置scroll.x，需要配合.sync获取最新的数据
columnMinWidth	Number		所有列共用的最小宽度，在没有width和minWidth时的冻结列和拖拽列的最小宽度

columns参数配置

参数	类型	必填	说明
hideSettingColumn	Boolean		是否在自定义列配置表中隐藏
disabledHide	Boolean		是否禁用自定义列配置表中的隐藏复选框
disabledFreeze	Boolean		是否禁用自定义列配置表中的冻结复选框
fixed	String、Boolean		默认的冻结列，只能为true或'left'其他不生效
width	Number		列宽，只能是数字
minWidth	Number		最小列宽，只能是数字，在冻结列和拖拽列时生效
resizable	Boolean		是否启用拖拽，需要表格显示边框bordered

JTable的方法

clearAllCacheSetting

用于清理所有JTable的缓存

• 参数: 无
• 返回值: 无

clearSetting

用于清理当前表的缓存

• 参数: 无
• 返回值: 无

resteColumns

还原初始的配置

• 参数: 无
• 返回值: 无

FAQ

方法如何调用？

在示例中，设定了一个 ref="table" 的属性，那么在vue中就可以使用this.$refs.table获取到该表格的实例，并调取其中的方法。 假如我要调取resteColumns方法，就可以这么写：this.$refs.table.resteColumns()

columns和scroll为什么要使用.sync

保证父组件和子组件数据同步

columns自定义列配置后会同步, scroll拖拽后会把最新的总宽度同步

对原a-table的使用有哪些限制

• 操作列的dataIndex或key必须为action
• 带有设置的列不能使用scopedSlots.filterIcon 和 scopedSlots.filterDropdown(没有操作列时，设置在最后一列)
• scroll.x和width必须是数字，不支持百分比
• 使用作用域插槽，需要使用解构赋值，里面有三个参数{text, record, index}，可参考示例写法

拖拽后没有设置宽度的列会被缩小

• 设置scroll.x配置一个默认宽度即可

出现空白列

• 设置至少一列没有width（没有width不能被拖拽）
• 建议没有width的列不能手动控制隐藏和冻结，使用disabledHide和disabledFreeze或者hideSettingColumn

resizable没有效果

• 需要设置resizable: true，要有width，且不能有fixed

自定义列的弹框会消失

• 因为冻结列的出现或消失会刷新表格结构导致弹框丢失
• 设置一个冻结列始终存在，不可被手动控制隐藏和取消冻结即可

注意事项

• table-key该属性为全局每个表的唯一属性，建议使用路由+命名的方式，如示例中设置
• 固定头和列（ant-design-vue自带的问题） ：若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 建议指定 scroll.x 为大于表格宽度的固定值。注意，且非固定列宽度之和不要超过 scroll.x。

示例

<template>
    <div>
      <div style="margin-bottom: 5px;">
        <a-button @click="resetTable">重置表格配置</a-button>
        <a-button @click="clearTableCache" style="margin-left: 5px;">清空本表缓存</a-button>
        <a-button @click="clearAllTableCache" style="margin-left: 5px;">清空全局JTable缓存</a-button>
      </div>
      <j-table  bordered
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :table-key="$route.name + '_table1'"
                ref="table"
                rowKey="key"
                :data-source="dataSource"
                :scroll.sync="scroll"
                :columns.sync="columns">
        <!--  使用插槽  -->
        <a slot="name" slot-scope="{text}">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="{text: tags}">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
        </span>

        <span slot="action" slot-scope="{record}">
          <a-popconfirm
            v-if="dataSource.length"
            title="是否删除?"
            @confirm="() => onDelete(record.key)"
          >
          <a href="javascript:">Delete</a>
        </a-popconfirm>
        </span>

        <template slot="footer" slot-scope="currentPageData">
          Footer：{{ currentPageData }}
        </template>
      </j-table>
    </div>
</template>

<script>
import JTable from '@comp/jero/JTable'

export default {
  name: 'Demo',
  components: { JTable },
  data () {
    const columns = [
      {
        // 是否在配置表中隐藏
        // hideSettingColumn: true,
        // 尽量都设置最小宽度，冻结列与拖拽时生效
        minWidth: 100,
        width: 100,
        // 禁用配置表中的隐藏或冻结
        disabledHide: true,
        disabledFreeze: true,
        // 可拖拽属性（不能fixed一起用）
        // resizable: true,
        // 默认冻结，值可以是 'left' 或 true
        fixed: true,
        title: '#',
        ellipsis: true,
        dataIndex: 'key'
      },
      {
        resizable: true,
        title: 'Date',
        dataIndex: 'date',
        width: 200
      },
      {
        // 标题使用插槽使用这个代替title（用于设置里显示列名）
        columnTitle: 'Name',
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' }
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' }
      },
      {
        resizable: true, // 可拖拽属性
        title: 'Amount',
        dataIndex: 'amount',
        minWidth: 100,
        width: 100
      },
      {
        title: 'Type',
        dataIndex: 'type',
        width: 100
      },
      {
        title: 'Note',
        dataIndex: 'note',
        // 保留一列自适应
        // width: 100
        // 建议：没有宽度的列至少一列禁止自定义（解决冻结或隐藏列导致出现空列）
        // disabledHide: true,
        // disabledFreeze: true,
        hideSettingColumn: true
      },
      {
        title: 'Action',
        key: 'action',
        width: 200,
        // filterIcon 和 filterDropdown 不能使用
        scopedSlots: { customRender: 'action' }
      }
    ]
    const dataSource = [
      {
        key: 0,
        name: 'John Brown',
        tags: ['nice', 'developer'],
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 1,
        name: 'Jim Green',
        tags: ['loser'],
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 2,
        name: 'Joe Black',
        tags: ['cool', 'teacher'],
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer'
      }
    ]
    return {
      scroll: { x: 1400 },
      columns: columns,
      dataSource: dataSource,
      selectedRowKeys: []
    }
  },
  methods: {
    // 还原表格初始配置
    resetTable () {
      this.$refs.table.resteColumns()
    },
    // 清除当前表格缓存
    clearTableCache () {
      this.$refs.table.clearSetting()
    },
    // 清除所有缓存
    clearAllTableCache () {
      this.$refs.table.clearAllCacheSetting()
    },
    onDelete (key) {
      this.$message.info(`del:${key}`)
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>