element ui 中el-form-item的使用和checkbox复选框的使用

在el-from上设置 inline 属性可以让表单变为行内平且排在一排
el-col可以设置输入框的长度
label-position=“left” 有三个值 left right top
指的是左边的label文字与右边输入框的对齐方式

label-position="left" 和 label-width="100px" 一起使用才有明确的效果

<el-form :inline="true" :model="formInline" label-position="left" label-width="100px">
 
  <el-form-item label="审批人">
    <el-col :span="4">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-col>
  </el-form-item>
  
  <el-form-item>
    <el-col :span="4">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-col>
  </el-form-item>

</el-form>

element ui 复选框选中同时获得id和label值的实现

因为我的复选框是根据树数据渲染生成的

完整代码

<template>
  <div>

    <el-checkbox-group v-model="checkList" @change="getcheck">
      <el-checkbox
        v-for="city in checkDataList"
        :key="city.id"
        :label="city"
        :checked="city.ischeck"
        >{{ city.label }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childids: [],
      childname: [],
      checkList: [],
      checkDataList: [
        { id: "1", label: "北京", ischeck: false },
        { id: "2", label: "上海", ischeck: false },
        { id: "3", label: "广州", ischeck: false },
        { id: "4", label: "深圳", ischeck: false },
        { id: "5", label: "武汉", ischeck: false },
        { id: "6", label: "天津", ischeck: false },
        { id: "7", label: "海南", ischeck: false },
        { id: "8", label: "贵州", ischeck: false },
      ],

      checkAll: false,

      isIndeterminate: false,

      value: "",
      props: { multiple: true },
    };
  },
  methods: {
    getcheck(value) {
      var childId = []; //初始化为空存用来存着选中的id
      var childName = []; //初始化为空用来存着选中的name
      value.forEach((item, index) => {
        //value是对应复选框选中的每一条数据
        if (childId.indexOf(item.id) == -1) {
          childId.push(item.id);
        }
        if (childName.indexOf(item.label) == -1) {
          childName.push(item.label);
        }
      });
      console.log(childId);
      console.log(childName);
    },
  },
};
</script>