下拉框+树形数据+勾选框+父子节点分开+单选+再次点击（勾选）取消/删除弹框+删除警告+选择数据警告+操作成功提示/日期格式转化/下拉框+勾选框+多选+全选+反选+清空/一些备忘和备注

树形下拉框

首先，是个树形下拉框

<template>
  <div>
    <el-select
      ref="selectTree"
      v-model="form.Id"
      filterable
      placeholder="请选择"
    >
      <el-option
        :key="form.Id"
        :value="form.Id"
        :label="form.label"
        style="height: auto"
        hidden
      />
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        :node-key="defaultProps.value"
        @node-click="handleNodeClick"
        default-expand-all
      />
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        {
          Id: 1,
          label: '一级 1',
          children: [
            {
              Id: 11,
              label: '二级 1-1',
              children: [
                {
                  Id: 111,
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          Id: 2,
          label: '一级 2',
          children: [
            {
              Id: 21,
              label: '二级 2-1',
              children: [
                {
                  Id: 211,
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              Id: 22,
              label: '二级 2-2',
              children: [
                {
                  Id: 221,
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          Id: 3,
          label: '一级 3',
          children: [
            {
              Id: 31,
              label: '二级 3-1',
              children: [
                {
                  Id: 311,
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              Id: 32,
              label: '二级 3-2',
              children: [
                {
                  Id: 321,
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      treeList: [],
      defaultProps: {
        value: 'Id',
        label: 'label',
        children: 'children'
      },
      form: {
        Id: '',
        lable: ''
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      this.form.Id = data.Id
      this.form.label = data.label
      this.$refs.selectTree.blur()
    }
  }
}
</script>

然后，给加上勾选框

参数	说明	类型	可选值	默认值
show-checkbox	节点是否可被选择	boolean	—	false

还有，让勾选框实现单选

在el-tree的绑定事件里加上如下代码（data为绑定事件返回的选中值）

        if (checked) {
          this.$refs.tree.setCheckedNodes([data]);
        }}

其次，把父子节点分开来

参数	说明	类型	可选值	默认值
check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean	—	false

接着，实现勾选选择

事件名称	说明	回调参数
check	当复选框被点击的时候触发	共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

    check(data,checked){
        this.form.Id = data.Id;
        this.form.lable = data.label;
        this.$refs.selectTree.blur();
        if (checked) {
          this.$refs.tree.setCheckedNodes([data]);
        }
    }

最后，实现父节点点击展开，勾选选中；子节点点击选中，勾选选中

handleNodeClick(data, checked) {
      // 是否父节点判断
      if(!data.hasOwnProperty("children"))
        {this.form.Id = data.Id;
        this.form.lable = data.label;
        this.$refs.selectTree.blur();
        console.log("点击节点");
        if (checked) {
       this.$refs.tree.setCheckedNodes([data]);
     }}
    },

PS：实现，再次点击节点（取消勾选）取消选中

  methods: {
    // 点击节点
    handleNodeClick(data, checked, com) {
      // 当前节点若已选择则取消选择
      if (this.form.lable == data.label) {
        checked.checked = !checked.checked;
        this.form.Id = "";
        this.form.lable = "";
        this.$refs.selectTree.blur();
      } else {
        // 当前节点未选择
        // 是否父节点判断，若为父，则点击展开，勾选选中，子则点击选中
        if (!data.hasOwnProperty("children")) {
          this.form.Id = data.Id;
          this.form.lable = data.label;
          this.$refs.selectTree.blur();
          if (checked) {
            this.$refs.tree.setCheckedNodes([data]);
          }
        }
      }
    },
    // 勾选框
    check(data, checked) {
      console.log(checked);
      // 当前已勾选
      if (checked.checkedKeys.length == 0) {
        // 再次点击将勾选状态置为空，并取消选择
        this.$refs.tree.setChecked(data, false);

        this.form.Id = "";
        this.form.lable = "";
        this.$refs.selectTree.blur();
      } else {
        // 未勾选，勾选后选中
        this.form.Id = data.Id;
        this.form.lable = data.label;
        this.$refs.selectTree.blur();
        if (checked) {
          this.$refs.tree.setCheckedNodes([data]);
        }
      }
    },
  },

文件上传请求头

enctype="multipart/form-data" method="POST"

submit.onclick = () => {const file = document.getElementById('file').files[0];var form = new FormData();form.append('file', file);

// type 1
axios.post('http://localhost:7787/files', form).then(res => {
    console.log(res.data);
})
// type 2
fetch('http://localhost:7787/files', {
    method: 'POST',
    body: form
}).then(res => res.json()).tehn(res => {console.log(res)});
// type3
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:7787/files', true);
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send(form);

}

图标备注

el-icon-finished 全选
el-icon-document-copy 反选
el-icon-document-delete 清空

删除警告/确定删除弹框/选择数据

点击删除或启用关闭按钮后跳出弹框（传参：title）
显示“确定删除”“确定启用”“确定关闭”
点击“再想想”关闭
点击“确定”跳出弹框（传参：messageText(1)）
“操作成功”或者“只能选择一行数据”或者“可以多选”

设置角色页面：

select事件：change

实现：下拉框，带勾选框，可以多选、搜索，按钮：全选、反选、清空

代码：

<template>

  <el-select

    v-model="selectValues"

    v-bind="$attrs"

    multiple

    filterable

    placeholder="请选择（可输入搜索）"

    style="width: 50%"

    @change="changeSelect"

  \>

  <!-- 按钮 -->

    <span @click.prevent.native @click="selectall">

      <i class="el-icon-finished"></i> 全选

    </span>

    <span @click.prevent.native @click="selectover">

      <i class="el-icon-finished"></i> 反选

    </span>

    <span @click.prevent.native @click="selectnone">

      <i class="el-icon-finished"></i> 清空

    </span>

    <el-option

      v-for="item in options"

      :key="item[props.value]"

      :label="item[props.label]"

      :value="item[props.label]"

    \>

      <el-checkbox v-model="item.isCheck" @click.prevent.native>{{

        item[props.label]

      }}</el-checkbox>

    </el-option>

  </el-select>

</template>

<script>

export default {

  name: "MultipleSelect",

  inheritAttrs: false, // 似乎设不设置都可以

  model: {

    prop: "initSelectValues",

    event: "change",

  },

  props: {

    initSelectValues: {

      type: Array,

      default: () => [],

    },

    // 下拉选项

    options: {

      type: Array,

      default: () => [],

    },

    // 选项键值对

    props: {

      type: Object,

      default: () => {

        return {

          label: "label",

          value: "value",

        };

      },

    },

  },

  data() {

    return {

      selectValues: [],

      isSelectAll: false,

    };

  },

  watch: {

    // 监听（全选，全不选以及checkbox是否勾选）

    selectValues: {

      handler(arr) {

        this.options.forEach((item) => {

          if (arr.includes(item[this.props.label])) {

            item.isCheck = true;

          } else {

            item.isCheck = false;

          }

        });

        // 强制更新（checkbox回显)

        this.$forceUpdate();

      },

    },

  },

  created() {

    // 回显

    this.selectValues = this.initSelectValues;

  },

  methods: {

    // 当选择值

    changeSelect(val) {

      this.$emit("change", this.selectValues);

    },

    // 全选

    selectall() {

      if (this.selectValues.length < this.options.length) {

        this.selectValues = this.options.map((item) => item[this.props.label]);

      } else {

        // 说明已经全选了，所以全不选

        this.selectValues = [];

      }

    },

    // 反选

    selectover() {

      this.options.forEach((item) => {

        let index=this.selectValues.indexOf(item[this.props.label])

          if (index!=-1) {

            this.selectValues.splice(index,1)

          } else {

            this.selectValues.push(item[this.props.label])

          }

        });

    },

    // 清除

    selectnone() {

      this.selectValues = [];

    },

  },

};

</script>

<style lang="scss" scoped>

span{

  margin: 15px;

}

span:hover {

  color: #62baf7;

  cursor: pointer;

}

</style>

删除警告弹框

src\views\cttEctManage\components\deleteDg.vue

弹框阴影

.common-container>>>.el-dialog{
  background: rgb(255, 255, 255);
  box-shadow: 0 0 1px 7px rgba(105, 105, 105, 0.5);
}

获取时间并转换

为2022-8-18 20：39：00
    var time=new Date()
    console.log(time.toLocaleString("zh").replace(/\//g, '-'))

// 点击数据
    multipleTable(val) {
      // console.log(val);
    },
    // 获取后端数据
    getData() {},
    // 查询数据
    check() {},
    // 重置
    reget() {},
    // 新增数据
    add() {},
    // 编辑
    edit() {},
    // 删除
    dele() {},

选择器

<el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>

options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''

警告错误

<template>
  <el-button :plain="true" @click="open2">成功</el-button>
  <el-button :plain="true" @click="open3">警告</el-button>
  <el-button :plain="true" @click="open1">消息</el-button>
  <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message('这是一条消息提示');
      },
      open2() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },

  open3() {
    this.$message({
      message: '警告哦，这是一条警告消息',
      type: 'warning'
    });
  },

  open4() {
    this.$message.error('错了哦，这是一条错误消息');
  }
}