vue el-table表头加必填符号*
vue el-table表头加必填符号*
·
方法一
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),
];
},
}
第三种
忘了
更多推荐
已为社区贡献1条内容
所有评论(0)