使用vue版本:[email protected]
使用element-plus版本:[email protected]
引用了如下脚本:
<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>
标签:vue,return,必填,app,element,columnIndex,must From: https://www.cnblogs.com/bingshao/p/16613799.html