vue 목록 그림 선택 연결 작업

우선 css, checkbox 스타일을 미화합니다. 이 코드를 가져가면 직접 사용할 수 있습니다

label {
 font-size: 25px;
 cursor: pointer;
 position: absolute;
 top: -10px;
 right: 0px;
 z-index: 150;
}
 
label i {
 font-size: 15px;
 font-style: normal;
 display: inline-block;
 width: 18px;
 border-radius: 15px;
 height: 18px;
 text-align: center;
 line-height: 18px;
 color: #fff;
 vertical-align: middle;
 margin: -2px 2px 1px 0px;
 border: #53c7f0 1px solid;
}
 
input[type="checkbox"],
input[type="radio"] {
 display: none;
 outline: none;
}
 
input[type="radio"]+i {
 border-radius: 7px;
}
 
input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i {
 background: #fff;
 color: #53c7f0;
}

다음은 내용 부분입니다. 여기 변수의 이름은 비교적 혼란스럽지만 효과는 모두 변수를 통해 제어됩니다. 주요한 사고방식은 클릭한 후에 하나의 id를 임시 수조에 전송하고 이 임시 수조를 두루 훑어보고 수조의 값을 현재 값과 비교하는 것입니다. 만약에 비교가 성공하면 선택한 체크박스에 표시됩니다
상대적으로 제출하려면 임시 수조만 넣으면 돼요.

 <div class="t-recommed-r" v-for="(item,index) in list" :key="index">
  <p><span></span> {{ item.name }} <span></span></p>
  <ul>
   <li v-for="(val,key) in item.data" :key="key" @click="checkTab(val.id)">
   <label v-for="(v, k) in checkedList" :key="k" v-show="val.id === v">
    <input type="checkbox" :checked="val.id === v">
    <i>✓</i>
   </label>
   <a><img src="@/assets/images/null.png"><em>{{ val.name }}</em></a>
   </li>
  </ul>
  </div>

마지막

data () {
 return {
  checkedList: [],
  list: []
 }
 },
methods: {
 checkTab (id) {
  let index = this.checkedList.indexOf(id)
  if (index === -1) {
  this.checkedList.push(id)
  } else {
  this.checkedList.splice(index, 1)
  }
 },
}
//  , ,  , 

추가 지식: vue 목록에서 선택한 내용을 가져오고 인쇄
먼저 선택한 내용을 팝업층을 통해 표시합니다

showPrintData: function() {
 var id = this.checkedList[0].id;
 axios.post(this.$api.contentGet, { id: id }).then(res => {
 this.contentTxt = res.body.txt;
 this.dialogFormVisible=true;
 });
},

contentTxt: "",
dialogFormVisible: false,

<el-dialog :visible.sync="dialogFormVisible">
 <div ref="print" v-html="contentTxt">
 {{contentTxt}}
 </div>
 <div slot="footer" class="dialog-footer">
 <el-button type="primary" @click="printData()"> </el-button>
 </div>
</el-dialog>

그런 다음 인쇄

printData: function() {
 this.$print(this.$refs.print);
},

설명:
vue 프레임워크 사용은element
사용된 플러그인 주소 인쇄:https://github.com/xyl66/vuePlugs_printjs
메인js에서 등록
import Print from '@/plugs/print'
Vue.use(Print);
이상의 이 vue에 대한 목록 이미지 선택 연결 동작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.