门户网站宣传方案,温州网站关键词推广,抚州制作网站哪家公司好,扫一扫识别图片现有一个胡萝卜厂生产不同品种的胡萝卜#xff0c;为了便于客户了解产品#xff0c;现需在官网展示胡萝卜信息。现有的萝卜信息#xff1a;编号#xff08;id#xff09;、名称#xff08;name#xff09;、保质期#xff08;age#xff09;、特点#xff08;remark为了便于客户了解产品现需在官网展示胡萝卜信息。现有的萝卜信息编号id、名称name、保质期age、特点remark但是日后会有扩展信息可能会加上颜色、体积等信息。 1、template
问题分析 现在可以确定胡萝卜有4个属性要展示以后还要扩展信息而且这个厂以后可能生产别的蔬菜水果也需要展示相应信息需求变动的话要修改很多代码。这时候如果有一个动态表格表格的表头信息从后台获取或在js中配置那日后修改胡萝卜表的属性增加或删除表字段时就不用修改前端页面代码长远一点来看日后这个厂生产别的蔬菜水果也需要信息展示时这个表格就可以复用把表格抽出来当一个模板需要用的页面引用即可这个代码我有时间会从项目中整理出来。
代码上场啦 动态表格
el-rowel-row el-colspan可选择属性:/span/el-colel-colel-checkbox-group v-modelcheckArr sizemediumel-col :span12 v-foritem in optionalColumnList :keyitem.propel-row :gutter20el-colel-col :span2el-checkbox :labelitem.propName changemenuChange(item) /el-checkbox/el-col/el-col /el-row/el-col/el-checkbox-group/el-col/el-row/el-rowel-table classfixedtableHeight v-loadinglistLoading refmultipleTable :datashowList :header-cell-style{background:#96CDCD} stripe tooltip-effectdark stylewidth: 100%;margin-top:1%;el-table-column :labelitem.propName :propertyitem.prop v-foritem in tableColumnList :keyitem.prop aligncentertemplate slot-scopescopespan{{scope.row[scope.column.property]}}/span/template/el-table-column/el-table注意tableColumnList就是实现动态的关键因素 tableColumnList里面存放的就是我们通过js文件或者接口获取到的表头属性内容如下
[{prop: ‘id’, propName: ‘编号’},
{prop: ‘name’, propName: ‘名称’},
{prop: ‘age’, propName: ‘保质期’},
{prop: ‘remark’, propName: ‘特点’}],rop跟胡萝卜表中的字段是一一对应的propName就是每个字段的中文名也即在表头显示的名字。
tableColumnList的获取方法有两种
1在前端js中配置
我是放在static文件夹下面的config.js中目录如下 内容直接声明一个数组变量并赋值就好用的时候引入js直接使用名字就可以使用 放在这里的好处前端项目打包成dist时会把这个static文件夹放在dist里面以后修改的时候就直接修改js配置文件不用动.vue源代码。
2从后端接口获取
注意采用此种方法获取。后端接口一定要同时返回属性的中文名和英文名即prop和propName。
还有一个关键步骤就是一定要在在页面渲染之前获取到tableColumnList然后再去渲染表格这就涉及到vue的生命周期了这块不做多余解释我是直接在created中调用获取tableColumnList的方法整个js如下
script
export default {data() {return {listLoading: false,showList: [],// 这里为了简便我就没有调用后台接口获取数据直接写的假数据 你要用的话可以调用后台接口获取tableColumnList注意数据格式tableColumnList: [{prop: id, propName: 编号},{prop: name, propName: 名字},{prop: age, propName: 保质期},{prop: remark, propName: 特点}],// 这里为了简便我就没有调用后台接口获取数据直接写的假数据dataList: [{id: 100001,name: 小红萝卜,age: 2年,remark: 适合油炸,country: 中国,address: 广东省深圳市},{id: 100002,name: 萝卜妹,age: 2年,remark: 适合水煮,country: 美国,address: 硅谷},{id: 100003,name: 胖萝卜头,age: 1年,remark: 适合玩儿,country: 泰国,address: 清迈},{id: 100004,name: 萝卜酱,age: 4年,remark: 适合吃火锅,country: 韩国,address: 首尔}],optionalColumnList: [{prop: country, propName: 出口国家},{prop: address, propName: 零售点}],checkArr:[]}},created() {this.queryFn()},methods: {queryFn() {// 调用后台接口获取tableColumnList和dataList的方法写在这里// getData().then(response {// this.tableColumnList response.data.tableColumnList// this.dataList response.data.dataList// })this.showList this.dataList},clearQuery() {this.query.name this.queryFn()},menuChange(item){// 注意 我这里都用的假数据要从后台获取tableColumnList和dataList的时候//每一次调用menuChange都要重新获取tableColumnList和dataList保证属性和数据是对应的 let flag truefor(var i0;ithis.checkArr.length;i){if(this.checkArr[i] item.propName){flag falsebreak}}if(!flag){this.tableColumnList.push(item)}if(flag){Array.prototype.contains function(obj) {var j this.length;while (j--) {if (this[j] obj) {return j; // 返回的这个 i 就是元素的索引下标}}return false}this.tableColumnList.splice(this.tableColumnList.contains(item),1)}},}
}
/script解释一下menuChange方法 当用户勾选一个可选择属性之后就触发这个方法这个方法主要做一件事情
改变tableColumnList的值从而动态改变表格的列
页面效果如下
可选择属性有两个(也可以看作以后可能扩展的属性这里只演示一下动态效果)勾选之后: 在这里插入图片描述 注意
动态表格与element一般表格在使用方法上的两个区别
1、label与property的赋值方式
动态表格表格的label和property是动态根据后台返回的数据(或者从js获取)来取值的后台返回的数据就是上面的tableColumnList。通过 :label“item.propName” 取得tableColumnList中的propName也就是表头每一列的名字
通过 :property“item.prop” 取得tableColumnList中对象的prop也就是后台实体类中的属性名
2、属性和数据双向绑定方式,也就是 scope.row.*通过 ** scope.row[scope.column.property]** 来获取每一个属性对应的数据 scope.column.property 中的property取的就是 :property“item.prop” 中的值
