黔西南大屏
This commit is contained in:
yanran200730
@@ -25,7 +25,13 @@
|
||||
flex: config[i].width ? 'inherit' : 1
|
||||
}">
|
||||
<i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
|
||||
<span :title="column.v">{{ column.v }}</span>
|
||||
<render-slot
|
||||
v-if="config[i].render"
|
||||
:render="config[i].render"
|
||||
:row="item"
|
||||
:column="column">
|
||||
</render-slot>
|
||||
<span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,6 +42,26 @@
|
||||
export default {
|
||||
name: 'AiDvTable',
|
||||
|
||||
components: {
|
||||
renderSlot: {
|
||||
functional: true,
|
||||
props: {
|
||||
render: Function,
|
||||
column: {type: [String, Number] },
|
||||
row: {type: [Array, Object] },
|
||||
},
|
||||
render: (h, data) => {
|
||||
let params = {
|
||||
row: data.props.row
|
||||
}
|
||||
if (data.props.column) {
|
||||
params.column = data.props.column
|
||||
}
|
||||
return data.props.render(h, params)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
@@ -68,7 +94,7 @@
|
||||
},
|
||||
|
||||
size: {
|
||||
type: 'String',
|
||||
type: String,
|
||||
default: 'small'
|
||||
}
|
||||
},
|
||||
@@ -114,12 +140,14 @@
|
||||
})
|
||||
|
||||
this.body = bodyKey.map(v => {
|
||||
return value.map(e => {
|
||||
return {
|
||||
v: e[v]
|
||||
}
|
||||
})
|
||||
return value.map(e => e[v])
|
||||
})
|
||||
},
|
||||
|
||||
onClick (config, e) {
|
||||
if (config.click && typeof config.click === 'function') {
|
||||
return config.click.call(this, e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -325,16 +325,16 @@
|
||||
},
|
||||
{
|
||||
name: '联系TA',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
v1: '联系TA',
|
||||
v2: '联系TA',
|
||||
v3: '联系TA',
|
||||
v4: '联系TA',
|
||||
v5: '联系TA',
|
||||
v6: '联系TA',
|
||||
v7: '联系TA',
|
||||
v8: '联系TA',
|
||||
v9: '联系TA',
|
||||
v10: '联系TA'
|
||||
}
|
||||
],
|
||||
chartConfig1: {
|
||||
@@ -618,77 +618,95 @@
|
||||
},
|
||||
eventTableData: [
|
||||
{
|
||||
name: '姓名',
|
||||
v1: '宗梦瑞',
|
||||
v2: '宗梦瑞',
|
||||
v3: '宗梦瑞',
|
||||
v4: '宗梦瑞',
|
||||
v5: '宗梦瑞',
|
||||
v6: '宗梦瑞',
|
||||
v7: '宗梦瑞',
|
||||
v8: '宗梦瑞',
|
||||
v9: '宗梦瑞',
|
||||
v10: '宗梦瑞'
|
||||
name: '时间',
|
||||
v1: '04/18',
|
||||
v2: '02/18',
|
||||
v3: '04/18',
|
||||
v4: '04/18',
|
||||
v5: '04/18',
|
||||
v6: '04/18',
|
||||
v7: '04/18',
|
||||
v8: '04/18',
|
||||
v9: '04/18',
|
||||
v10: '04/18'
|
||||
},
|
||||
{
|
||||
name: '己办结',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
name: '事件内容',
|
||||
v1: '咨询如何报考摩托车驾驶咨询如',
|
||||
v2: '咨询如何报考摩托车驾驶咨询如',
|
||||
v3: '咨询如何报考摩托车驾驶咨询如',
|
||||
v4: '咨询如何报考摩托车驾驶咨询如',
|
||||
v5: '咨询如何报考摩托车驾驶咨询如',
|
||||
v6: '咨询如何报考摩托车驾驶咨询如',
|
||||
v7: '咨询如何报考摩托车驾驶咨询如',
|
||||
v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
|
||||
v9: '咨询如何报考摩托车驾驶咨询如',
|
||||
v10: '咨询如何报考摩托车驾驶咨询如'
|
||||
},
|
||||
{
|
||||
name: '办理中',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
name: '状态',
|
||||
v1: '已办理',
|
||||
v2: '已办理',
|
||||
v3: '已办理',
|
||||
v4: '已办理',
|
||||
v5: '处理中',
|
||||
v6: '已拒绝',
|
||||
v7: '处理中',
|
||||
v8: '待处理',
|
||||
v9: '处理中',
|
||||
v10: '处理中'
|
||||
},
|
||||
{
|
||||
name: '上报数',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
},
|
||||
{
|
||||
name: '联系TA',
|
||||
v1: '12',
|
||||
v2: '12',
|
||||
v3: '123',
|
||||
v4: '123',
|
||||
v5: '123',
|
||||
v6: '123',
|
||||
v7: '2',
|
||||
v8: '123',
|
||||
v9: '123',
|
||||
v10: '1234'
|
||||
name: '查看',
|
||||
v1: '详情>>',
|
||||
v2: '详情>>',
|
||||
v3: '详情>>',
|
||||
v4: '详情>>',
|
||||
v5: '详情>>',
|
||||
v6: '详情>>',
|
||||
v7: '详情>>',
|
||||
v8: '详情>>',
|
||||
v9: '详情>>',
|
||||
v10: '详情>>'
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableConfig () {
|
||||
return this.tableData.map((v, index) => {
|
||||
if (index === 4) {
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
align: 'center',
|
||||
width: '',
|
||||
fontSize: '12px',
|
||||
flex: '',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'p', {
|
||||
style: {
|
||||
width: '52px',
|
||||
height: '22px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '22px',
|
||||
color: '#D4F2FF',
|
||||
cursor: 'pointer',
|
||||
margin: '0 auto',
|
||||
borderRadius: '4px',
|
||||
backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
|
||||
},
|
||||
on: {
|
||||
click: e => {
|
||||
console.log(params)
|
||||
}
|
||||
},
|
||||
}, params.column
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
color: '#d0e1e8',
|
||||
align: '',
|
||||
@@ -700,15 +718,55 @@
|
||||
},
|
||||
|
||||
eventTableConfig () {
|
||||
return this.eventTableData.map((v, index) => {
|
||||
return {
|
||||
return [
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: '',
|
||||
width: index === 0 ? '100' : '',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
},
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: 'left',
|
||||
width: '250',
|
||||
fontSize: '14px',
|
||||
flex: ''
|
||||
},
|
||||
{
|
||||
color: '#d0e1e8',
|
||||
align: 'center',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: '',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'i', {
|
||||
style: {
|
||||
width: '52px',
|
||||
height: '20px',
|
||||
textAlgin: 'center',
|
||||
lineHeight: '20px',
|
||||
color: '#07B794',
|
||||
margin: '0 auto',
|
||||
borderRadius: '2px',
|
||||
background: 'rgba(19, 246, 201, 0.14)',
|
||||
}
|
||||
}, params.column
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
color: '#00AAFF',
|
||||
align: '',
|
||||
width: '',
|
||||
fontSize: '14px',
|
||||
flex: '',
|
||||
click: e => {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user