给列表加星号;给按钮某一项加星号;不调后台接口,对列表进行编辑和删除

原创
小哥 3年前 (2022-11-10) 阅读数 6 #大杂烩

1.在表格中添加星号

  • :model="targetForm" :rules="targetRules" ref="targetForm"
  • el-form-item ----> prop="name"
  • return-------targetRules: {},targetForm:{},
  • 保存—

    targetDetermine(formRef) { this.$refs[formRef].validate((valid) => { if (valid) { //这是保存的代码。 } }) },

2.向列表中的项目添加星号

  1. el-table-column ------------ :render-header="addRedStar"

    addRedStar(h, { column }) { // 将所需徽标添加到表的标题 // console.log("column", column); // if (column.width == 223) { // return [h("span", " " + column.label)]; // } return [ h("span", { style: "color: red" }, "*"), h("span", " " + column.label), ]; },

3.不调整后端接口,添加和删除列表



data() {
    var naturalNumber = (rule, value, callback) => {
      if (value === "" || value == null) {
        callback(new Error("请输入"));
      } else if (!/^[1-9]d*|0$/.test(value)) {
        callback(new Error("请输入自然数"));
      } else {
        callback();
      }
    };
    return {
     addRedStar(h, { column }) {
        // 将所需徽标添加到表的标题
        // console.log("column", column);
        // if (column.width == 223) {
        //   return [h("span", " " + column.label)];
        // }
        return [
          h("span", { style: "color: red" }, "*"),
          h("span", " " + column.label),
        ];
      },
       targetRules: {
        name: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 0, max: 100, message: "不能超过100个字符", trigger: "blur" },
        ],
        sort: [{ validator: naturalNumber, required: true, trigger: "blur" }],
        isLeaf: [{ required: true, message: "不能为空", trigger: "blur" }],
        quotaChildren: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
       isLeafList: [
        {value: "1",label: "是",},
        {value: "0",label: "否",},
      ],
      targetForm: {},
      quotaChildren: [], //指标新增,指标详细信息列表
    }
 },
 // 方法集合
  methods: {
    targetDetermine(formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
        //这是保存的代码。
        }
      })
   },
   addTable(data) {
      // this[data].push({ name: "", type: "", sort: "" });
      console.log("this.quotaChildren", this.quotaChildren);
      this.quotaChildren.push({ name: "", type: "", sort: "" });
    },
    // 指标新增 删除
    deleteHandle(index, data) {
      // this[data].splice(index, 1);
      this.quotaChildren.splice(index, 1);
    },

  },
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除