# 单选框
<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 Copy