杭州seo,慈溪企业网站seo,自学前端怎么学,长春净月潭建设投资集团网站需求是根据JSON文件生成表格#xff0c;包含配置和自动props属性以及过滤器#xff1b; 数据示例#xff1a; 表格设置#xff1a;
/*** 表格表头信息* chineseToPinYin: 这是封装的根据中文汉字转换为拼音的方法* prop: 表头字段名* filter: 数据过滤器* label: 表头显示…需求是根据JSON文件生成表格包含配置和自动props属性以及过滤器 数据示例 表格设置
/*** 表格表头信息* chineseToPinYin: 这是封装的根据中文汉字转换为拼音的方法* prop: 表头字段名* filter: 数据过滤器* label: 表头显示名称*/
const tableTitle [{ prop: chineseToPinYin(日期), label: 日期, width: 160 },{ prop: chineseToPinYin(地点), label: 地点, filter: addressFilter },{ prop: chineseToPinYin(早餐), label: 早餐 },{ prop: chineseToPinYin(开会), label: 开会 },{ prop: chineseToPinYin(纪要), label: 纪要 },{ prop: chineseToPinYin(工作), label: 工作 },{ prop: chineseToPinYin(午餐), label: 午餐 },{ prop: chineseToPinYin(午休), label: 午休 },{ prop: chineseToPinYin(下班), label: 下班 }
]
addressFilter 过滤器
function addressFilter (value) {return addressOptions.filter(i i.value value)[0].label
}
表格事件示例
/*** 表格按钮事件* event: 按钮事件名子组件直接eventNamehandleCustomizeEvent* primary按钮类型按钮的颜色*/
const tableButton [{ label: 编辑, event: edit, type: primary },{ label: 删除, event: delete, type: danger }
]
抛出示例
export { tableTitle, tableButton } 组件示例 el-table refautoTable sizeminiborder stripe default-expand-allrow-keyid:datadatatooltip-effectdark:header-cell-styleheaderCellStyle:cell-stylecellStylestylewidth: 100%cell-class-namecustom-tablecell-clickhandleClickCellsrow-clickhandleClickRowselection-changehandleSelectionChange!--左侧自定义插槽--slot namebefore/slot!--左侧是否有勾选--el-table-column v-ifisChecked fixedleft label全选 typeselection width40/el-table-column!--循环表格--el-table-column v-for(item, key) in title :labelitem.label :widthitem.width :keykeytemplate slot-scopescopespan v-ifitem.filter{{item.filter(scope.row[item.prop])}}/spanspan v-else{{scope.row[item.prop]}}/span/template/el-table-column
!-- el-table-column v-for(item, key) in title :propitem.prop :labelitem.label :widthitem.width :keykey/--!--右侧自定义插槽--slot nameafter/slot!--右侧按钮集合--el-table-column v-ifevent.length fixedright :widthevent.length*70 label操作template slot-scopescopespan classcustomize-link v-for(item, key) in event :keykey clickhandleTableEvent(item.event, scope.$index, scope.row)el-link :typeitem.type :iconitem.icon sizemini{{item.label}}/el-link/span/template/el-table-column/el-table
PROPS示例 props: {isChecked: {type: Boolean,default: false},title: {type: Array,default: () ([])},data: {type: Array,default: () ([])},event: {type: Array,default: () ([])}}
methods示例 methods: {// 表格选择行handleSelectionChange (row) {this.$emit(checkRow, row, this.$refs.autoTable)},// 表格操作事件handleTableEvent (event, index, row) {this.$emit(event, index, row)},// 单击行handleClickRow (row, column, event) {this.$emit(clickRow, row, column, event)},// 选择某个单元格handleClickCells (row, column, cell, event) {this.$emit(clickCell, row, column, cell, event)}} 页面示例 auto-table is-checked :titletableTitle :datamockTableData :eventtableButton checkRowhandleTableCheckRow edithandleClickTableEdit deletehandleClickTableDelete/
事件部分就不用叨叨了吧 效果示例
