vue 3 + element UI 表格添加必填星号：*

 

使用vue版本：vue@3.2.37

使用element-plus版本：element-plus@2.2.12

引用了如下脚本：

<script src="~/lib/vue/vue.global.min.js"></script>

<link href="~/lib/element-plus2/index.min.css" rel="stylesheet" />

<link href="~/lib/element-plus2/theme-chalk/index.min.css" rel="stylesheet" />
<script src="~/lib/element-plus2/index.full.js"></script>
<script src="~/lib/element-plus2/locale/en.js"></script>
<script src="~/lib/element-plus2/locale/zh-cn.js"></script>
<script src="~/lib/element-plus2/icons-vue/dist/global.iife.min.js"></script>
<script src="~/lib/axios/axios.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>

效果如图：

 

 代码如下：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<div id="app">     <!--使用draggable组件-->     <div class="itxst">             <el-table :data="tableData"  :header-cell-class-name="must"                       current-row-key="id"                       style="width: 100%">                 <el-table-column prop="date" label="日期" width="180"></el-table-column>                 <el-table-column label="姓名" width="180" prop="name">                 </el-table-column>                 <el-table-column prop="address" label="地址"></el-table-column>             </el-table>     </div> </div>   <script type="text/javascript">     var Main = {         data() {             return {                 tableData: [                     {                         id: "1",                         date: "2022-08-02",                         name: '王小虎',                         address: "深圳市龙岗坂田街道21号",                         inputValue: "",                         inputVisible: false,                     }                                    ],             };         },         methods: {             must({ row, column, rowIndex, columnIndex }) {                 if (columnIndex === 1 || columnIndex === 2) {                     return 'must';                 }                 return '';             }         },     };       const app = Vue.createApp(Main);     app.use(ElementPlus)     const reportDataVM = app.mount("#app");   </script>   <style type="text/css">     table th.must div:before {         content: "*";         color: red;         margin-right: 5px;         font-size: 20px;     } </style>