表格选择框

<template>
  <section class="TableSelectDemo">
    <el-input v-model="value" style="width: 280px">
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="showModal = true"
      ></el-button>
    </el-input>
    <vxe-modal
      v-model="showModal"
      width="800"
      height="400"
      type="confirm"
      showFooter
      @confirm="confirm"
    >
      <!-- -------------------------------表格------------------------------- -->
      <div style="height: calc(100% - 8px)">
        <oce-vxe-table
          ref="xnyVxeTable"
          :data="tableData"
          :column="tableColumn"
          :option="tableOption"
          @current-change="currentChange"
        ></oce-vxe-table>
      </div>
      <!-- -------------------以上代码可根据业务需要修改----------------------- -->
    </vxe-modal>
  </section>
</template>

<script>
export default {
  name: 'TableSelectDemo',
  data() {
    return {
      value: '',
      showModal: false,
      // 表格数据-------------------------------------------------------------------
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
        },
        {
          label: '列2',
          prop: 'column2',
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      tableData: [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
          column4: '1-4',
          id: 1,
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
          column4: '2-4',
          id: 2,
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
          column4: '3-4',
          id: 3,
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
          column4: '4-4',
          id: 4,
        },
      ],
      tableOption: {},
      // -------------------以上代码可根据业务需要修改-----------------------
    }
  },
  methods: {
    // -----------------------------事件---------------------------------
    // 确定
    confirm() {
      const row = this.$refs.xnyVxeTable.tableMethods('getCurrentRecord')
      console.log('确定-选中行:', row)
      if (row) this.value = row.column1
      else this.$message.warning('无选中行')
    },
    // 选中行
    currentChange(row) {
      console.log('选中行:', row)
    },
    // -------------------以上代码可根据业务需要修改-----------------------
  },
}
</script>

Expand Copy Copy