element transfer 双击穿梭实现 (通过 render-content )

参考链接

<el-transfer
   v-if="reportName === 'multicol'"
   v-model="dfkm"
   :data="data"
   :props="props"
   :render-content="renderFunc"
   :titles="['借方展开', '贷方展开']"
   :button-texts="['到左边', '到右边']"
 />
data() {
     
 return {
     
    props: {
     
      label: 'kmmc',
      key: 'kmdm'
    },
    data: [],
    jfkm: [], // 借方科目
    dfkm: [], // 贷方科目
  }
}
renderFunc(h, option) {
      // 目前 return 返回的使用了 jsx语法
 return <el-tooltip class='item' effect='dark' content={
     option.kmmc} placement='top-start'><span on-dblclick={
      () => this.dblclick(this.dfkm, option)}>{
      option.kmdm }-{
      option.kmmc }</span></el-tooltip>
},
dblclick(modelV, option) {
      // 双击 穿梭
  // 简单的逻辑  如果不在 v-model值数组里面,则push,否则从数组中删除
  if (modelV.includes(option.kmdm)) {
     
    const index = modelV.indexOf(option.kmdm)
    modelV.splice(index, 1)
  } else {
     
    modelV.push(option.kmdm)
  }
}

你可能感兴趣的:(element-ui)