vue 大量图片展示_Ant Design of Vue 展示多张图片

//Vue.use(vueDirectiveImagePreviewer)

export default{

name:'TableList',

components: {

STable

inject:['reload'],

data () {return{

pagination:{

total:0,

pageSize:10,//每页中显示10条数据

showSizeChanger: true,

showTotal: total=> `共有 ${total} 条数据`, //分页中显示总的数据

searchWord:'',

keyword:'',

dateString:'',

date:'',

imgUrl:'http://xxx.com/',(图片域名)

selectIndex: undefined,

active:1,

isChoose:false,

operation2:[],

list:[],

currentCategory:[],

description:'列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',

visible:false,

visible2:false,headers: {

authorization:'authorization-text',

confirmLoading2:false,

labelCol: {

xs: { span:24},

sm: { span:5}

wrapperCol: {

xs: { span:24},

sm: { span:16}

form:this.$form.createForm(this),

mdl: {},//高级搜索展开/关闭

advanced: false,//查询参数

queryParam: {

page:1,//第几页

size: 10,//每页中显示数据的条数

},//表头

columns: [{

title:'合同材料',

dataIndex:'contractImg',

key:'pic',

scopedSlots: { customRender:'pic'}

{

title:'清运资质',

dataIndex:'qualifica',

key:'pic1',

scopedSlots: { customRender:'pic1'}

}],//向后端拉取可以用的操作列表

permissionList: null,

selectedRowKeys: [],

selectedRows: []

}

filters: {

statusFilter (status) {

const statusMap={1: '是',0: '否'}returnstatusMap[status]

}

created () {this.loadPermissionList()

mounted() {this.fetchData()

editShop(record){this.$route.query.record=recordthis.mdl =Object.assign({}, record)

console.log(this.mdl.id)this.id=this.mdl.id

methods: {

...mapActions(['shopEdit', 'Logout']),

...mapActions(['AddMenu', 'Logout']),fetchData(){this.$http.post('https://xxx/officeList').then(res =>{

console.log(res.data.data)this.operation2=res.data.data

const pagination= { ...this.pagination };

pagination.total=res.data.total;this.pagination =pagination;

})

},select (index) {this.selectIndex = this.selectIndex === index ?undefined : index

},handleOk () {},

toggleAdvanced () {this.advanced = !this.advanced

}

watch: {/*'selectedRows': function (selectedRows) {

this.needTotalList = this.needTotalList.map(item => {

return {

...item,

total: selectedRows.reduce( (sum, val) => {

return sum + val[item.dataIndex]

}, 0)

}

})

}*/}

}

vue 大量图片展示_Ant Design of Vue 展示多张图片相关推荐

ant vue 兼容性问题_Ant Design of Vue使用遇到的问题以及解决方法总结
解决方法:将参数 destroyOnClose 设置为true,表示当关闭时自动销毁Modal的子元素. 问题2:控件select的备选项option标签属性key和value值的区别? 解决方法: ...
ant vue 兼容性问题_ant design for vue 关于table的一些问题
1.为table添加分页: :pagination="pagination" pagination: { defaultPageSize: 10, showTotal: (tota ...
ant vue 设置中文_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
ant vue 语言_Ant Design Vue是什么
Ant Design Vue 是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. Ant Desi ...
使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
vs code vue 语法提示不全_Vue造轮子必备*.vue文件源码读取并高亮展示
相关依赖版本: node v10.15.0 npm v6.4.1 yarn v1.22.10 vue-cli v4.5.9 @vue/compiler v3.0.4 GitHub: vue-sour ...
vue 使用video加载视频进行展示，视频循环自动播放
vue 使用video加载视频进行展示,视频循环自动播放loop autoplay <span v-else-if="item.prop === 'alarmVedio'"& ...
bim展示 java_一个用于在浏览器上展示bim模型的vue插件
# wl-bim-viewer 一个用于在浏览器上展示bim模型的vue插件,可以预览转化后的CAD文件. 基于vue和autodesk forge viewer写成. 目前支持单模型加载及多模型顺序 ...
vue解决微信防盗链接图片无法展示问题
vue解决微信防盗链接图片无法展示问题 1.需求背景最近在vue项目的页面中使用到了微信公众号项目的图片,然后在另一个项目中引用时出现了防盗链接的提示,导致图片本身的内容无法展示. 解决方案防盗链 ...

vue 大量图片展示_Ant Design of Vue 展示多张图片

vue 大量图片展示_Ant Design of Vue 展示多张图片相关推荐

最新文章

热门文章