vue tree设置树形默认选中值与获取选中Code

<template><div><el-button @click="btn">按钮</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><template v-if="dialogVisi
今晚来我家吗

3787人浏览 · 2021-11-04 15:29:42
今晚来我家吗 · 2021-11-04 15:29:42 发布
<template>
  <div>
    <el-button @click="btn">
      按钮
    </el-button>

    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
    <template v-if="dialogVisible">
        <el-tree
      :data="lists"
      ref="tree"
      node-key="Code"
      show-checkbox
      default-expand-all
      :props="defaultProps"
      :expand-on-click-node="false"
      highlight-current
      @check="getCurrentNode"
    >
      <!-- :render-content="renderContent" -->
      <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
        <span> <i :class="data.icon"></i>{{ node.code }} </span>
      </span> -->
    </el-tree>
    </template>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      currentNodeKey: "",
       defaultProps: {
        children: "Children",
        label: "LocationName",
      },
      ruleForm: {
        menuIdsisEditor: [],
      },
      lists: [
    {
      "Children": [
        {
          "Children": [
            {
              "Children": [],
              "Code": "2111011043270072",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-001 Company Code",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Legal Data",
              "DataCategory": "Reference Master Data"
            },
            {
              "Children": [],
              "Code": "2111011043270078",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-002 G/L Account Master",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Legal Data",
              "DataCategory": "Operation Master Data"
            },
            {
              "Children": [],
              "Code": "2111011043270084",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-003 Inspection Plan",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Quality Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270090",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-004 MM Schedule Lines",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Logistic Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270096",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-005 Vendor Master",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Purchasing Data",
              "DataCategory": "Operation Master Data"
            },
            {
              "Children": [],
              "Code": "2111011043270102",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-006 Material Master Data",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Product Data",
              "DataCategory": "Operation Master Data"
            },
            {
              "Children": [],
              "Code": "2111011043270108",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-007 Customer Demand",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Business Partner Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270114",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-008 Customer Master Data",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Sales Data",
              "DataCategory": "Operation Master Data"
            },
            {
              "Children": [],
              "Code": "2111011043270120",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-009 Production Order",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Manufacturing Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270126",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-010 Bill of Material",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Engineering Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270132",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-011 WBS element",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "Project Management Data",
              "DataCategory": "Transaction Data"
            },
            {
              "Children": [],
              "Code": "2111011043270138",
              "AddTime": "2021-11-01 10:43:27",
              "AddUser": "SYSTEM",
              "UpdateTime": "2021-11-01 10:43:27",
              "DeleteState": 0,
              "Modifier": "SYSTEM",
              "LocationName": "BO-012 Personnel Number",
              "ParentCode": "2111011043270070",
              "NodeIndex": 3,
              "IsLastNode": 1,
              "NodeSort": 0,
              "DataDomain": "HR Data",
              "DataCategory": "Transaction Data"
            }
          ],
          "Code": "2111011043270070",
          "AddTime": "2021-11-01 10:43:27",
          "AddUser": "SYSTEM",
          "UpdateTime": "2021-11-03 16:10:57",
          "DeleteState": 0,
          "Modifier": "CAL3CNG",
          "LocationName": "2570",
          "ParentCode": "2111011043270069",
          "NodeIndex": 2,
          "IsLastNode": 0,
          "NodeSort": 0,
          "DataDomain": "",
          "DataCategory": ""
        }
      ],
      "Code": "2111011043270069",
      "AddTime": "2021-11-01 10:43:27",
      "AddUser": "SYSTEM",
      "UpdateTime": "2021-11-01 10:43:27",
      "DeleteState": 0,
      "Modifier": "SYSTEM",
      "LocationName": "RBCC",
      "ParentCode": "0",
      "NodeIndex": 1,
      "IsLastNode": 0,
      "NodeSort": 0,
      "DataDomain": null,
      "DataCategory": null
    }
      ],
    };
  },
  created() {},
  components: {},
  mounted() {
    
  },

  methods: {
    getCurrentNode(data) {
      //无论编辑和新增点击了就传到后台这个值
      this.ruleForm.menuIdsisEditor = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
        console.log(this.ruleForm.menuIdsisEditor)
    },

    btn() {
      this.dialogVisible = true
        // 设置默认选中
      this.$nextTick(function () {
        let arr2 = ['2111011043270069', '2111011043270070', '2111011043270072']
        arr2.forEach(value => {
          this.$refs.tree.setChecked(value, true, false);
        })
      });
    },

    handleClose(done) {
      done();
    },
    
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>
            {node.label}
            <i style="color:#999;margin-left:5px">(id:{node.key})</i>
          </span>
        </span>
      );
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
加粗样式
Vue
前往低代码交流专区
更多推荐
Vue里echarts根据页面大小动态调整/自适应
Vue
vue 表单验证
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^