默认插槽与具名插槽的区别
slot 具名后设置slot-scope="子组建变量"， 在子组建中给slot-scope 变量赋值是在 ** this.$slotScope.你定义的插槽名称(你要给父级slot-scope带入的值) **
/**
* @name 可编辑表格
* @template <ConditionTable :data="demoData" :column="demoColumn" />
* @param {json} data 数据 例子： let demoData = [{ title1: "1", title2: "2", title3: "3", title4: "4", title5: "5",edit:"0" }];
* @param {json} column 表头 例子
* let demoColumn = [
{ prop: "title1", label: "表头1", align: "center", width: "auto",slot:"input" },
{ prop: "title5", label: "表头5", align: "center", width: "auto",slot:"select",select:[{label:"Sliding Scale",value:"1"},{label:"Fix Comm",value:"2"}] },
{ prop: "action", label: "操作" , align: "center", width: "300",slot:"button+" }
];
* @param {slot} slot 可处理类型 input 输入框 select 下拉菜单需要设置 select属性对应数据 button：无增加按钮 button+：有增加按钮
*/
let create;
export default {
name: "ConditionTable",
props: {
data: {
type: Array,
default: () => [] // 数据
},
column: {
type: Array,
default: () => []
}
},
data() {
return {};
},
mounted() {
console.log(this.column);
},
methods: {
// TODO: 创建表头
createColumn(data) {
let th = this;
// console.log(this.column)
let button = (row, $index, { prop }) => {
let button = (
<div class="inlineBlock">
{row["edit"] === "0" || !row["edit"] ? (
<el-button type="primary" class="ml10" size="mini" onClick={() => this.eventEdit($index, row, data)}>
修改
</el-button>
) : (
<el-button type="warning" class="ml10" size="mini" onClick={() => this.eventConfirm($index, row, data)}>
确认
</el-button>
)}
<el-button type="danger" class="ml10" size="mini" onClick={() => this.eventDelete($index, row, data, "service")}>
删除
</el-button>
</div>
);
return button;
};
// TODO: 按钮类
let buttonPluse = (row, $index, { prop }) => {
return (
<div>
<el-button type="primary" size="mini" onClick={() => this.eventAdd($index, row, data)}>
增加
</el-button>
{button(row, $index, { prop })}
</div>
);
};
// TODO: input 类
let input = (row, $index, { prop }) => {
let directives = [{ name: "number", value: row, arg: prop }];
let input;
if (row["edit"] === "1") {
input = <el-input vModel={row[prop]} {...{ directives }} class="edit-input" size="small" />;
} else {
input = <span>{row[prop]}</span>;
}
return input;
};
// TODO: select 类
let select = (row, $index, { prop, select }) => {
let text = () => {
let da = select.filter((item) => {
return item.value == row[prop];
});
if (da.length) {
return da[0].label;
} else {
return row[prop];
}
};
if (row["edit"] === "1") {
return (
<el-select vModel={row[prop]} class="edit-input" size="small">
{select.map((item, ind) => {
return <el-option key={ind} label={item.label} value={item.value} />;
})}
</el-select>
);
} else {
return <span>{text()}</span>;
}
};
let createSlot = (row, $index, item) => {
return th.$scopedSlots["slot"](item);
};
// TODO: 列
let col = this.column.map((item = { prop: "", label: "--", align: "center", slot: "" }, ind) => {
let scopedSlots = {
default: ({ row, $index }) => {
// debugger
switch (item["slot"]) {
case "button+":
return buttonPluse(row, $index, item); // note: 有新增
case "button":
return button(row, $index, item); // note: 无新增
case "input":
return input(row, $index, item);
case "select":
return select(row, $index, item);
case "slot":
return createSlot(row, $index, item);
default:
return row[item.prop];
}
}
};
if (item["slot"]) {
return (
<el-table-column
prop={item.prop}
label={item.label}
fixed={item["fixed"] || false}
align="center"
width={item["width"] || "auto"}
scopedSlots={scopedSlots}
/>
);
} else {
return (
<el-table-column
prop={item.prop}
fixed={item["fixed"] || false}
label={item.label}
align="center"
key={ind}
width={item["width"] || "auto"}
/>
);
}
});
return col;
},
// TODO：增加
eventAdd(index, row, data) {
let cloneData = { ...row };
for (let item in cloneData) {
cloneData[item] = item == "edit" ? "1" : "";
}
data.splice(index + 1, 0, cloneData);
this.$forceUpdate();
this.$emit("add", data);
},
// TODO: 修改
eventEdit(index, row, data) {
row.edit = "1";
this.$forceUpdate();
},
// TODO: 确认
eventConfirm(index, row, data) {
row.edit = "0";
this.$forceUpdate();
this.$emit("confirm", data);
},
// TODO: 删除
eventDelete(index, row, data, name) {
if (data.length <= 1) {
this.$message({
type: "warning",
message: "最后一条数据,请点击编辑！"
});
return;
}
this.$confirm("确认删除此条记录吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
data.splice(index, 1);
this.$forceUpdate();
this.$emit("delete", data);
});
}
},
render(h) {
create = h;
let { data } = this;
return (
<article class="condition-table">
<el-table data={data} fit border empty-text="暂无数据" style="width: 100%">
{this.createColumn(data)}
</el-table>
</article>
);
}
};
