group transfer

ส่วนประกอบสาธารณะ - กล่องรับส่งแบบจัดกลุ่มได้

อุปกรณ์ประกอบฉากและกิจกรรมต่าง ๆ เชื่อมต่อกับกล่องรับส่งของ Ele.me UI ได้อย่างราบรื่น

http://element-cn.eleme.io/1.4/#/zh-CN/component/transfer

ดูตัวอย่าง http://liaoyinglong.com/group-transfer/dist/

อธิบายอุปกรณ์ประกอบฉากเล็กน้อย

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
ข้อมูล	แหล่งข้อมูล	อาร์เรย์ [{ คีย์, ป้ายกำกับ, ปิดการใช้งาน, เด็ก: [] }]	-	-
อุปกรณ์ประกอบฉาก	นามแฝงของฟิลด์สำหรับแหล่งข้อมูล	วัตถุ {คีย์, ป้ายกำกับ, ปิดการใช้งาน, เด็ก ๆ }	-	-
แสดงผลเนื้อหา	ฟังก์ชันการแสดงผลรายการข้อมูลที่กำหนดเอง	ฟังก์ชั่น (h ตัวเลือก)	-	-
ปิดการใช้งานทั้งหมด	ปิดการใช้งานตัวเลือกทั้งหมด	บูลีน	-	เท็จ
showOverflowTooltip	แสดงคำแนะนำเครื่องมือเมื่อเนื้อหายาวเกินไปและถูกซ่อนอยู่	บูลีน	-	เท็จ

ตัวอย่างรหัส

 < ec-group-transfer
    v-model =" value "
    :data =' json '
    filterable
    @change =" handleChange "
    :left-default-checked =" ['2', '3'] "
    :right-default-checked =" ['4'] "
    :button-texts =" ['到左边', '到右边'] "
    :render-content =' renderFunc '
  /> 

 export default {
  data ( ) {
    return {
      json : [
        {
          label : '渠道名称1' ,
          key : 'id1' ,
          children : [
            {
              value : '1' ,
              key : '1' ,
              label : '广告位名称1' ,
            } ,
            {
              value : '2' ,
              key : '2' ,
              label : '广告位名称2' ,
            } ,
          ] ,
        } ,
        {
          label : '渠道名称2' ,
          key : 'id2' ,
          children : [
            {
              value : '3' ,
              key : '3' ,
              label : '广告位名称3' ,
            } ,
            {
              value : '4' ,
              key : '4' ,
              label : '广告位名称4' ,
            } ,
          ] ,
        } ,
      ] ,
      value : [ '1' , '4' ] ,
    } ;
  } ,
  methods : {
    handleChange ( value , direction , movedKeys ) {
      console . log ( value , direction , movedKeys ) ;
    } ,
    renderFunc ( h , option ) {
      return (
        < span >
          { option . key } - { option . label }
        </ span >
      ) ;
    } ,
  } ,
} ;