点击修改规格属性-CRMEB社区

点击修改规格属性

管理

编辑

删除

目前是只能新添加和删除，不能修改原来已经添加的属性不怎么方便

于是就简单的修改了一下，（还有更好的方案就是直接在原来的规格上面输入）

懒得写css了就这样吧简单点

\src\pages\product\productAdd\index.vue (这是从商品列表点编辑）

\src\pages\product\components\productDetails.vue (这是从商品列表点详情右侧弹窗）

两个需要修改的地方一模一样

		<!-- 可以搜索查找 handleRemove2 定位代码位置 -->
		
		<Col span="24">
		 <FormItem v-if="attrs.length !== 0">
		  <draggable class="dragArea list-group" :list="attrs" group="peoples" handle=".move-icon" :move="checkMove"
		    @end="end">
		    <div v-for="(item, index) in attrs" :key="index" class="acea-row row-middle mb10">
		      <div class="move-icon">
		        <span class="iconfont icondrag2"></span>
		      </div>
		      <div style="width: 90%" :class="moveIndex === index ? 'borderStyle' : ''">
		        <div class="acea-row row-middle">
			
		          <span class="mr5">{{ item.value }}</span>

		          <Icon type="ios-close-circle" size="14" class="curs" @click="handleRemoveRole(index)" />
		        </div>
		        <div class="rulesBox">
		
		     <draggable :list="item.detail" handle=".drag">
		         <Tag type="dot" closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" :name="j"
		             class="mr20 drag" @on-close="handleRemove2(item.detail, indexn)"   :style="indexn === Edit_index ? 'background: #e1f6ff !important' : ''">
		                  <span  @click.stop="setEdit(indexn)" >{{ j }}</span>
		         </Tag>
		     </draggable>
				
		          <Input v-if="!Edit"  search enter-button="添加" placeholder="请输入属性名称"  v-model="item.detail.attrsVal"
		            @on-search="createAttr(item.detail.attrsVal, index)" class="width-add" />
				
					
					
				<Input  v-else  search enter-button="修改" placeholder="请输入修改后的属性名称"  v-model="Edit_input"
				  @on-search="ok_Edit()" class="width-add" />	
				    <Button v-if="Edit" @click="on_Edit()"  style="margin-top: 10px;color: #888;background: #f5f5f5;">取消修改</Button>
			
					
		        </div>
		      </div>
		    </div>
		  </draggable>
		</FormItem>
		</Col>

         data() {
			   return {
                Edit:false, 
				Edit_index:'',
				Edit_input:'',//注意,逗号别漏了,下面省略号别管不用复制 表示 下面原来还有很多很多代码
				...........
				...........

	
		methods: {
	
	
			setEdit(indexn){
				this.Edit = true 
				this.Edit_index = indexn 
				this.Edit_input= this.attrs[0].detail[indexn] 	   
			},
			 
	ok_Edit() {
			let index = this.Edit_index
			let item = this. Edit_input
			this.attrs[0].detail.splice(index, 1, item)
			this.Edit = false
			this.Edit_index =''
	},
				
			on_Edit(){
				this.Edit = false
				this.Edit_index =''
			},//注意,逗号别漏了,下面省略号别管不用复制 表示 下面还有很多很多代码
			
	....................
	..................

\src\pages\product\components\productDetails.vue

这里还要在关闭的时候清除上一次的选中状态

<!-- 可以搜索查找 drawerChange(e) 定位代码位置 -->

    drawerChange(e) {

		this.Edit = false 
		this.Edit_index = ''
		................//省略号别管 不用复制 表示 下面原来还有很多很多代码
		...............