<template> <el-drawer :destroy-on-close="true" title="权限设置" :visible.sync="authDrawer" size="30%" <div class="storeInfo"> <el-table border :data="gridData" ref="multipleTable" @row-click="singleElection" :header-cell-style="{ background: '#f0f0f0', }" > <!-- @selection-change="handleSelectionChange" --> <!-- <el-table-column type="selection" width="70" align="center" ></el-table-column> --> <el-table-column width="65"> <template slot-scope="scope"> <el-radio class="radio" v-model="templateSelection" :label="scope.$index"> </el-radio> </template> </el-table-column> <el-table-column prop="name" label="功能名称" min-width="200" align="center" ></el-table-column> </el-table> <div class="demo-drawer__footer"> <el-button @click="authDrawer = false">关闭</el-button> <el-button type="primary" @click="submitAuth" :loading="loading">{{ loading ? "提交中 ..." : "保存" }}</el-button> </div> </div> </el-drawer> </template> <script> import { inviteStoresSetPerm, inviteStoresGetPermInfo, } from "@/api/business/joinStores"; export default { name: "storeInfo", props: { row: { type: Object, default: () => {}, }, }, data() { return { gridData: [ { name: "暂停(用户端店铺不显示,店铺功能正常)", id: "1", }, { name: "关闭(专卖店权限临时关闭,普通店铺正常)", id: "2", }, { name: "取消(专卖店权限全部取消,降为普通店铺)", id: "3", }, { name: "正常(默认)", id: "4", }, ], templateSelection:'', multipleSelection: [], loading: false, authDrawer: false, }; },我想让我的el-radio给一个选中默认值应该怎么做
时间: 2023-10-12 21:04:51 浏览: 178
要给el-radio设置一个选中默认值,可以使用v-model指令来绑定一个数据属性,并设置其初始值。在这个示例中,可以将`templateSelection`属性设为el-radio的v-model,并将默认值设为所需的选项索引,如下所示:
```html
<el-radio class="radio" v-model="templateSelection" :label="scope.$index"> </el-radio>
```
```javascript
data() {
return {
// ...
templateSelection: 0, // 设置初始默认值为索引0
// ...
}
}
```
这样,在页面加载时,el-radio就会选中默认值为索引0的选项。如果想要选中其他选项,只需将`templateSelection`的值设置为对应选项的索引即可。
相关问题
<template slot-scope=""> <el-button type="text" size="small" @click="table = true">详情</el-button> </template> <el-drawer title="详情" :visible.sync="table" direction="rtl" size="35%" style="height:65%;margin-top:140px"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-drawer>
这段代码是一个使用了 Element UI 组件库的 Vue 组件。其中包括一个按钮和一个抽屉组件。当按钮被点击时,抽屉组件会出现,并且展示一个表格组件,表格中包含了日期、姓名和地址三列数据。这个表格的数据是由一个叫做 gridData 的变量所提供的。当抽屉组件中的关闭按钮被点击时,抽屉组件会关闭。
<el-drawer :title="title" :visible.sync="table" weight="300px" direction="rtl" append-to-body :close-on-click-modal="false" class="drawer-title" style="height:70%;margin-top:140px;padding:0"> <edit ref="form" v-if="table" v-model="dataPO" /> </el-drawer>
这段代码是使用 Element UI 组件库中的 el-drawer 组件创建一个抽屉弹窗,其中包含一个标题(title)、一个可见性变量(visible)、一个宽度(weight)、一个方向(direction)、一个是否追加到 body 元素下的变量(append-to-body)、一个是否在点击背景遮罩层时关闭弹窗的变量(close-on-click-modal)、一个样式类名(class)、一个样式对象(style)以及一个子组件 edit。子组件 edit 是一个自定义组件,使用 v-if 控制其显示和隐藏,并且通过 v-model 绑定数据,即 dataPO。
阅读全文