vue el-table表头加必填符号*

呱呱牛

已于 2022-11-18 17:17:02 修改

阅读量2.6k

点赞数 1

分类专栏： vue element js 文章标签： vue.js javascript 前端

于 2022-11-18 17:16:05 首次发布

本文链接：https://blog.csdn.net/weixin_45753447/article/details/127925473

版权

js 同时被 3 个专栏收录

6 篇文章 1 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

方法一

1.el-table表头加必填符号*及必填校验

<el-form :model="tableForm" ref="tableForm" :rules="rules" size="small">
     <el-table :data="tableForm.data" border>
	 <el-table-column >
	   <template slot="header">
	     <span style="color:#f67979">*</span>
	     <span class="tableHeader"> content</span>
	   </template>
	   <template slot-scope="scope">
	       <el-form-item
	         :prop="`data[${scope.$index}].validityDate`"
	         :rules="rules.validityDate"
	       >
	         <el-input
	              type="text"
	              v-model="scope.row.validityDate"
	            />
	       </el-form-item>
	   </template>
	 </el-table-column>
	 <el-table-column
            v-if="viewStatus != 'view'"
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="80"
          >
            <template slot-scope="scope">
              <i
                class="el-icon-plus"
                style="color: #409eff;
                  font-weight: bold;
                  cursor: pointer;
                  font-size: 18px;
                "
                @click="handleStandardadd"
                v-if="scope.$index == 0"
              ></i>
              <i
                class="el-icon-minus"
                style="
                  color: #f56c6c;
                  font-weight: bold;
                  cursor: pointer;
                  font-size: 18px;
                "
                @click="handleDelete(scope.$index)"
                v-else
              ></i>
            </template>
        </el-table-column>
        <el-button @click='submit'>提交</el-button>
	</el-table>
</el-form>

 data() {
    return {
      tableForm:{
	      data: [
	        {
	          validityDate: "",
	        },
	      ],
   	 },
      rules: {
        validityDate: [
          {
            required: true,
            message: '必填项不能空',
            trigger: 'change'
          }
        ],
   }
 },
  watch: {
    'tableForm.data': {
      handler: function (val) {
        if (val?.length) {
          this.$emit("", val);
        }
      },
      deep: true,
      immediate: true,
   },
 }，
 methods:{
	 //动态加一行table
	 handleStandardadd() {
	      this.tableForm.data.push({
	        validityDate: "",
	      });
	  },
	  //动态删除
	 handleDelete(index) {
     	 this.tableForm.data.splice(index, 1)
     },
     submit() {
      console.log(tableData)
      this.$refs.tableForm.validate((valid) => {
       console.log(valid)
      })
    },

方法二

 <el-table-column label="content" align="center" 
	 :render-header="addRedStar"
	 >
    <template slot-scope="scope">
      <el-inputtype="text" v-model="scope.row.content" class="EltabelInput"
      />
    </template>
  </el-table-column>


---------------------------------
 methods: {
     // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
 }