在el-from上设置 inline 属性可以让表单变为行内平且排在一排
el-col可以设置输入框的长度
label-position=“left” 有三个值 left right top
指的是左边的label文字与右边输入框的对齐方式
label-position="left" 和 label-width="100px" 一起使用才有明确的效果
element ui 复选框选中同时获得id和label值的实现
因为我的复选框是根据树数据渲染生成的
完整代码
v-for="city in checkDataList" :key="city.id" :label="city" :checked="city.ischeck" >{{ city.label }}
>
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);
},
},
};