vue
<el-table :data="tableData"> <el-table-column label="店员数量评级金额"> <template #default="scope"> <el-table-column v-for="(item,index) in scope.row.fullTimeNCs" :key="item" :label="item.label"> {{ item.price }} </el-table-column> </template> </el-table-column></el-table>
script
<script setup>import { ref } from "vue";这是完整的表格数据,其中fullTimeNCs的长度是动态的`const tableData = ref([ { area: "NKA_门店1", fullTimeNCs: [{label:'1个店员评级金额',price:"100"}, {label:'2个店员评级金额',price:"400"},{label:'3个店员评级金额',price: "600"}], }, { area: "NKA_门店12", fullTimeNCs: [{label:'1个店员评级金额',price:"100"}, {label:'2个店员评级金额',price:"400"},{label:'3个店员评级金额',price: "600"}], }, { area: "NKA_门店13", fullTimeNCs: [{label:'1个店员评级金额',price:"100"}, {label:'2个店员评级金额',price:"400"},{label:'3个店员评级金额',price: "600"}], },]);`</script>
期望结果
店员数量是动态的,但是在这里无法循环渲染el-table-column多级表头
<el-table :data="tableInfo.tableData"> <el-table-column label="地区" prop="area"></el-table-column> <el-table-column label="店员数量评级金额"> <el-table-column v-for="item in tableInfo.headerList" :key="item.key" :label="item.label" :prop="item.key"> </el-table-column> </el-table-column></el-table>
数据需要自己转下 或者后端就返回那种格式
tableInfo(){ let tableData= [ { area: "NKA_门店1", fullTimeNCs: [ { label: "1个店员评级金额", price: "100" }, { label: "2个店员评级金额", price: "400" }, { label: "3个店员评级金额", price: "600" } ] }, { area: "NKA_门店12", fullTimeNCs: [ { label: "1个店员评级金额", price: "100" }, { label: "2个店员评级金额", price: "400" }, { label: "3个店员评级金额", price: "600" } ] }, { area: "NKA_门店13", fullTimeNCs: [ { label: "1个店员评级金额", price: "100" }, { label: "2个店员评级金额", price: "400" }, { label: "3个店员评级金额", price: "600" } ] } ] let headerList=[] tableData.forEach((item)=>{ item.fullTimeNCs.forEach((citem,cindex)=>{ let key=`customFiled${cindex+1}` item[key]=citem.price; let find=headerList.find(i=>i.label==citem.label) if(!find){ headerList.push({ key, label:citem.label }) } }) }) return { headerList, tableData }}
只需要用原生的html实现即可, 红框中的内容是动态展示的,而且每次也只会有一条数据
系统使用了element-plus按需载入的方式 我需要在一个组件内动态加载某些组件 这个loader方法一直无法正确渲染相应组件,例如type传入“ELInput”时系统会报个警告 尝试过import('element-plus/lib/components/ElInput')这种写法页不行,报错:[plugin:vite:import-analysis] No known conditions
其实是想要实现这样的样式: el-select 多选,选中的内容以逗号分割,最小宽度80px;最大宽度300px;超出最大宽度显示省略号 就是大概是下面这样,一行显示已经处理了,但是最小80px,然后input框的宽度根据选中的项的字符串内容变大,最大300px,超过显示省略号还没想好如何处理,有无大佬给个思路。 看了网上有说可以用 el-select 的prefix,结合计算属性去实现,但是pr
老项目el-ui升级到el-plus。很多地方用到了size mini 现在el-plus没有mini这个尺寸配置了。有没有方法能扩展el-plus的尺寸配置呢? 试过mini换成small样式,然后再修改small.但是老项目也针对small和mini做了区分样式改动。要确保之前的页面效果就要逐一改动页面了。大家还有什么好方法吗?
问题: 输入内容,失去焦点,应该提示【请输入正确的身份证号码】,也就是走rules的第二条规则partner,而不是走第一条require。 示例代码如下: 在线demo: el-form表单示例 - JS Bin
想问问,这个是什么意思?意思是我需要提交测试吗?如果要提交测试我应该怎么做?