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>

效果如图：

 

 代码如下：

<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>