主要是利用render-content 自定義數據項渲染函數
可以根據這個案例去了解,下面直接上代碼
<template>
<el-transfer v-model="value4" :props="{
key: 'value',
label: 'desc'
}" :render-content="renderFunc" :data="data3">
</el-transfer>
</template>
<script>
export default {
data() {
const generateData3 = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
value: i,
desc: `備選項 ${i}`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data3: generateData3(),
value4: []
};
},
mounted() {
console.log(this.data3);
},
methods: {
renderFunc(h, option) {
console.log(option);
var _this = this;
return h("span", {
attrs: {
id: option.value
},
domProps: {
innerHTML: option.desc
},
on: {
dblclick: function() {
//簡單的邏輯 如果不在 v-model值數組裏面,則push,否則從數組中刪除
if (_this.value4.includes(option.value)) {
console.log(22222)
let index = _this.value4.indexOf(option.value);
_this.value4.splice(index, 1);
} else {
console.log(333)
_this.value4.push(option.value);
}
}
}
});
}
}
};
</script>