实现参照： [ElementUI]el-table-column（表头）使用 :render-header
实现el-select（下拉框）
<el-table-columnlabel="用户类型"prop="insUsageType":show-overflow-tooltip="true"><template slot-scope="scope"><component:is="scope.row.currentView || 'coma'":options="dict.type.sys_user_type":value="scope.row.insUsageType"v-on:update-usagetype="updateUsageType"></component></template></el-table-column>
<el-table-columnlabel="操作"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row,scope.$index,scope.row.btn0type || 'edit')">{{ scope.row.btn0 || "修改" }}</el-button><el-buttonsize="mini"type="text"icon="el-icon-circle-close"@click="cancelAuthUser(scope.row,scope.$index,scope.row.btn1type || 'remove')">{{ scope.row.btn1 || "移出用户" }}</el-button></template></el-table-column>
data() {return {//子组件传来的值usageType: undefined}},components: {coma: {render: function (h) {return h("dict-tag", {attrs: {options: this.options,value: this.value,},});},props: ["options", "value"],},comb: {data() {return {usageType: "" };},props: ["options", "value"],mounted() {this.usageType = this.value;},render: function (h) {return h("el-select",{attrs: {placeholder: "请选择",value: this.usageType,},props: ["value"],on: {change: (value) => {this.usageType = value;this.$emit("update-usagetype", value);},},},[this.options.map((item) => {let {label, value } = item;return h("el-option", {props: {label,value: parseInt(value),key: value,},});}),]);},},},methods: {/** 移出用户||取消修改按钮操作 */cancelAuthUser(row, rowIndex, type) {switch (type) {case "remove":let insId = this.queryParams.params.insId;this.$modal.confirm('确认将该用户"' + row.userName + '"移出吗？').then(function () {return authUserCancel({userId: row.userId, insId: insId });}).then(() => {this.getList();this.$modal.msgSuccess("移出用户成功");}).catch(() => {});break;case "cancel":this.$set(this.userList, rowIndex, {...this.userList[rowIndex],currentView:"coma",btn0:"修改",btn1:"移出用户",btn0type:"edit",btn1type:"remove",});break;default:break;}},/** 修改||保存按钮操作 */handleUpdate: async function (row, rowIndex) {let currentView = "coma",btn0 = "修改",btn1 = "移出用户",btn0type = "edit",btn1type = "remove",insUsageType = this.userList[rowIndex].insUsageType;if (row.currentView == "coma" || !row.currentView) {currentView = "comb";btn0 = "保存";btn1 = "取消";btn0type = "save";btn1type = "cancel";} else {let res = await updateUsertoins({userId: row.userId,insId: this.insId,usageType: this.usageType,});if (res.code === 200) {this.$modal.msgSuccess("修改成功");insUsageType = this.usageType;} else {this.$message.error(res.msg);}}this.$set(this.userList, rowIndex, {...this.userList[rowIndex],currentView,btn0,btn1,btn0type,btn1type,insUsageType,});},/** 子组件修改用户类型方法 */updateUsageType(usageType) {this.usageType = usageType;}}
