try_vxe_app

try_vxe_app.vue

<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view /> -->
    <div>
      <vxe-toolbar>
        <template #buttons>
          <vxe-button @click="allAlign = 'left'">居左</vxe-button>
          <vxe-button @click="allAlign = 'center'">居中</vxe-button>
          <vxe-button @click="allAlign = 'right'">居右</vxe-button>
        </template>
      </vxe-toolbar>

      <vxe-table
        :align="allAlign"
        :data="tableData"
        @cell-click="cellClickEvent"
      >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="age" title="Age"></vxe-column>
      </vxe-table>

      <vxe-button @click="value11 = true"
        >完整功能的窗口（移动、拖动、状态保存）</vxe-button
      >
      <vxe-modal
        v-model="value11"
        id="myModal6"
        width="800"
        height="400"
        min-width="460"
        min-height="320"
        show-zoom
        resize
        remember
        storage
        transfer
      >
        <template #title>
          <span style="color: red">完整功能的窗口（移动、拖动、状态保存）</span>
          <span style="color: red">通过设置 transfer 将弹框容器插入 body</span>
        </template>
        <template #default>
          <p>
            <vxe-radio-group v-model="selectTab">
              <vxe-radio-button label="tab1" content="页签1"></vxe-radio-button>
              <vxe-radio-button label="tab2" content="页签2"></vxe-radio-button>
              <vxe-radio-button label="tab3" content="页签3"></vxe-radio-button>
            </vxe-radio-group>
          </p>

          <div v-show="selectTab === 'tab1'">
            <p>Tab1</p>
          </div>

          <div v-show="selectTab === 'tab2'">
            <p>Tab2</p>
          </div>

          <div v-show="selectTab === 'tab3'">
            <p>Tab3</p>
          </div>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

<script>
export default {
  data() {
    return {
      selectTab: "tab1",
      tableData_modal: [],
      value11: false,
      allAlign: null,
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 24,
          address: "Shanghai",
        },
      ],
    };
  },
  created() {
    this.tableData_modal = this.mockList(600);
  },
  methods: {
    cellClickEvent({ row, column }) {
      this.value11 = true;
      console.log(`单元格点击${column.title}`);
    },
    mockList(size) {
      const list = [];
      for (let index = 0; index < size; index++) {
        list.push({
          name: `名称${index}`,
          sex: "0",
          num: 123,
          age: 18,
          num2: 234,
          rate: 3,
          address: "shenzhen",
        });
      }
      return list;
    },
  },
};
</script>