1. <template>
    2.   <el-dialog
    3.     title="列表字段设置"
    4.     :visible.sync="dialogVisible"
    5.     width="30%"
    6.     :before-close="handleClose"
    7.   >
    8.     <el-checkbox
    9.       class="pl-20 w100"
    10.       style="height: 50px; background-color: #f5f5f7"
    11.       :indeterminate="isIndeterminate"
    12.       v-model="checkAll"
    13.       @change="handleCheckAllChange"
    14.     >
    15.       <span class="ml-20 fw-800">字段</span>
    16.       <span class="fw-800" style="margin-left: 280px">拖拽排序</span>
    17.     </el-checkbox>
    18.     <el-checkbox class="pl-20 w100" checked style="height: 50px">
    19.       <span class="ml-20 fw-600">姓名</span>
    20.     </el-checkbox>
    21.     <el-tree
    22.       :data="data"
    23.       show-checkbox
    24.       node-key="id"
    25.       icon-class="el"
    26.       default-expand-all
    27.       @node-drag-start="handleDragStart"
    28.       @node-drag-enter="handleDragEnter"
    29.       @node-drag-leave="handleDragLeave"
    30.       @node-drag-over="handleDragOver"
    31.       @node-drag-end="handleDragEnd"
    32.       @node-drop="handleDrop"
    33.       draggable
    34.       :allow-drop="allowDrop"
    35.       :allow-drag="allowDrag"
    36.     >
    37.     </el-tree>
    38.     <span slot="footer" class="dialog-footer">
    39.       <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    40.       <el-button size="mini" type="primary" @click="dialogVisible = false"
    41.         >确 定</el-button
    42.       >
    43.     </span>
    44.   </el-dialog>
    45. </template>
    47. <script>
    48. export default {
    49.   data() {
    50.     return {
    51.       dialogVisible: false,
    52.       checkAll: false,
    53.       isIndeterminate: true,
    54.       defaultProps: {
    55.         children: 'children',
    56.         label: 'label'
    57.       },
    58.       data: [
    59.         {
    60.           id: 1,
    61.           label: '一级 1'
    62.         },
    63.         {
    64.           id: 2,
    65.           label: '一级 2'
    66.         },
    67.         {
    68.           id: 3,
    69.           label: '一级 3'
    70.         }
    71.       ]
    72.     }
    73.   },
    74.   methods: {
    75.     // handleClose(done) {
    76.     //   this.$confirm('确认关闭？')
    77.     //     .then((_) => {
    78.     //       done()
    79.     //     })
    80.     //     .catch((_) => {})
    81.     // },
    82.     onShow() {
    83.       this.dialogVisible = true
    84.       // console.log(this.cities, 'cities')
    85.       console.log(123, 'cities')
    86.     },
    87.     //
    88.     handleDragStart(node, ev) {
    89.       console.log('drag start', node)
    90.     },
    91.     handleDragEnter(draggingNode, dropNode, ev) {
    92.       console.log('tree drag enter: ', dropNode.label)
    93.     },
    94.     handleDragLeave(draggingNode, dropNode, ev) {
    95.       console.log('tree drag leave: ', dropNode.label)
    96.     },
    97.     handleDragOver(draggingNode, dropNode, ev) {
    98.       console.log('tree drag over: ', dropNode.label)
    99.     },
    100.     handleDragEnd(draggingNode, dropNode, dropType, ev) {
    101.       console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    102.     },
    103.     handleDrop(draggingNode, dropNode, dropType, ev) {
    104.       console.log('tree drop: ', dropNode.label, dropType)
    105.     },
    106.     allowDrop(draggingNode, dropNode, type) {
    107.       if (dropNode.data.label) {
    108.         return type !== 'inner'
    109.       } else {
    110.         return true
    111.       }
    112.     },
    113.     allowDrag(draggingNode) {
    114.       return draggingNode.data.label.indexOf('三级 3-2-2') === -1
    115.     },
    117.     //
    118.     handleCheckAllChange(val) {
    119.       this.checkedCities = val ? cityOptions : []
    120.       this.isIndeterminate = false
    121.     },
    122.     handleCheckedCitiesChange(value) {
    123.       let checkedCount = value.length
    124.       this.checkAll = checkedCount === this.cities.length
    125.       this.isIndeterminate =
    126.         checkedCount > 0 && checkedCount < this.cities.length
    127.     }
    128.   }
    129. }
    130. </script>
    132. <style scoped>
    133. ::v-deep .el-checkbox {
    134.   display: flex;
    135.   align-items: center;
    136.   padding: 0 20px;
    137. }
    139. ::v-deep .el-checkbox__label {
    140.   color: #343435 !important;
    141. }
    143. ::v-deep .el-tree-node__expand-icon {
    144.   display: none;
    145. }
    147. ::v-deep .el-tree-node__label {
    148.   font-weight: 600;
    149. }
    151. ::v-deep .el-tree-node__label {
    152.   /* 保证:after为元素的显示 */
    153.   background-image: url('');
    154. }
    156. ::v-deep .el-tree-node__label:after {
    157.   display: inline-block;
    158.   background-image: url('../../assets/icon/caidan.png');
    159.   background-position: center center;
    160.   background-size: 40px 20px;
    161.   content: '';
    162.   width: 40px;
    163.   height: 20px;
    164.   /* visibility: hidden; 隐藏content中的内容*/
    165.   margin-left: 280px;
    166. }
    168. ::v-deep .el-tree-node {
    169.   height: 50px;
    170.   display: flex;
    171.   align-items: center;
    172. }
    173. </style>