vue-element ui 实现table表格部分数据行默认选中

最新推荐文章于 2023-06-28 17:56:10 发布

原创

最新推荐文章于 2023-06-28 17:56:10 发布 · 6.3k 阅读

7 ·

CC 4.0 BY-SA版权

在使用Vue-Element UI开发项目时，遇到需要在编辑功能中显示已关联商品并默认选中的问题。通过HTML、script代码和父子组件间的数据传递，成功实现了表格数据的默认勾选。关键步骤包括接收父组件传来的数据，并利用这些数据初始化表格的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用vue-element ui 开发前端项目时遇到一个棘手的问题，就是在编辑功能中重新设置关联商品时，在打开dialog弹窗中展示所有商品数据的同时默认将已经关联的商品勾选。（描述的可能不清楚，直接上图吧）
点击编辑进入
编辑页
默认勾选效果
在各种尝试之后，终于找到了一种解决方法，废话不多说，直接上代码！
HTML:

	 <el-row>
	    <el-col :span="14">
	      <el-form-item label="设置关联**" prop='courseIds'>
	        <el-button size="mini" type="primary" @click="chooseCommodity(commodityData)">选择**</el-button>
	          <ul >
	            <li style="marginRight: 0px" v-for="(item, index) of this.commodityName" :key="index">