【fix 66426】部分demo示例

2023-03-16 10:36:10 +08:00
parent 8bdd0211c8
commit 02862bc649
1 changed files with 148 additions and 0 deletions
@@ -0,0 +1,148 @@
 <template>
  <a-card :bordered="false">
    <div>
      <div>
        <a-button @click="clearCurrentCache(1)">清理表1缓存</a-button>
        <a-button @click="clearCurrentCache(2)">清理表2缓存</a-button>
        <a-button @click="clearJTableCache">清理全局缓存</a-button>
      </div>
      <j-table  bordered
                :table-key="$route.name + '_table1'"
                ref='table1'
                rowKey='key'
                tableLayout='fixed'
                :scroll="{ x: 2000 }"
                :data-source="dataSource"
                :columns.sync="columns">
        <span slot="action" slot-scope="{record}">
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="() => onDelete(record.key)"
          >
          <a href="javascript:">Delete</a>
        </a-popconfirm>
        </span>
      </j-table>
      <j-table  bordered
                :table-key="$route.name + '_table2'"
                ref='table2'
                rowKey='key'
                tableLayout='fixed'
                :scroll="{ x: 2000 }"
                :data-source="dataSource"
                :columns.sync="columns">
        <span slot="action" slot-scope="{record}">
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="() => onDelete(record.key)"
          >
          <a href="javascript:">Delete</a>
        </a-popconfirm>
        </span>
      </j-table>
    </div>
  </a-card>
 </template>
 <script>
 import JTable from '@comp/jero/JTable'
 export default {
  name: 'JTableList',
  components: { JTable },
  data () {
    const columns = [
      {
        // 是否在配置表格中显示
        // hideSettingColumn: true,
        // 尽量要有minWidth，冻结列时会临时使用作为width
        minWidth: 100,
        // 禁用配置表格中的隐藏或冻结
        // disabledHide: true,
        // disabledFreeze: true,
        title: '#',
        ellipsis: true,
        dataIndex: 'key',
        fixed: true
      },
      {
        title: 'Date',
        dataIndex: 'date',
        minWidth: 200
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        minWidth: 100
      },
      {
        title: 'Type',
        dataIndex: 'type',
        minWidth: 100
      },
      {
        title: 'Note',
        dataIndex: 'note',
        minWidth: 100
      },
      {
        title: 'Action',
        key: 'action',
        width: 200
      }
    ]
    const dataSource = [
      {
        key: 0,
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 1,
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer'
      },
      {
        key: 2,
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer'
      }
    ]
    return {
      columns,
      dataSource
    }
  },
  methods: {
    // 清除当前表格缓存
    clearCurrentCache (n) {
      this.$refs['table' + n].clearSetting()
    },
    // 清除所有缓存
    clearJTableCache () {
      this.$refs.table1.clearAllCacheSetting()
    },
    onDelete (key) {
      this.$message.info(`del:${key}`)
    }
  }
 }
 </script>
 <style scoped>
 </style>