# 单选框


<template>
  <div
    class="GeneralRadio"
    style="margin: auto; max-width: 1600px; height: 600px; position: relative"
  >
    <!-- 实际开发中需要传入request方法 -->
    <oce-general
      ref="xnyGeneral"
      :urlInfo="urlInfo"
      :option="generalOption"
      @radio-change="radioChange"
    >
      <!-- 表格顶部插槽 -->
      <template #table-top>
        <oce-general-test :option.sync="generalOption">
          <el-button size="mini" @click="setRadioRow"
            >选中数据</el-button
          ></oce-general-test
        >
      </template>
    </oce-general>
  </div>
</template>

<script>
export default {
  name: 'GeneralRadio',
  data() {
    return {
      urlInfo: {
        optionUrl: {
          url: '/system/webTable/tableInfo',
          method: 'post',
          webTableName: 'testTable',
        },
        dataUrl: {
          url: '/system/webTable/tableData',
          method: 'post',
        },
      },
      generalOption: {
        searchMenuSpan: 6, // 搜索框按钮宽度(4)
        tableOption: {
          align: 'left', // 列的对齐方式 (center)
          headerAlign: 'center', // 表头列的对齐方式 (center) 继承 align
          radio: true,
          radioStrict: false, // 严格模式,选中后不能取消
          radioReserve: false, // 是否保留勾选状态
          radioVisibleMethod({ row }) {
            if (row.id == 3) return false
            return true
          }, // 是否允许勾选的方法,该方法,的返回值用来决定这一行的 radio 是否显示
          radioCheckMethod({ row }) {
            if (row.id == 5) return false
            return true
          }, // 是否允许选中的方法,该方法的返回值用来决定这一行的 radio 是否可以选中
          radioTrigger: 'default', // 触发方式
        },
      },
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    setRadioRow() {
      const el = this.$refs.xnyGeneral
      const row = el.getData(0)
      el.setRadioRow(row).then((res) => {
        console.log('操作完成', res)
      })
    },
    radioChange(e) {
      console.log('单选框', e)
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.GeneralRadio {
}
</style>

Expand Copy
Last Updated: 11/29/2023, 11:04:47 AM